/* The design system.
 *
 * Taken from the app, not invented for the web. Speechfy's interface is warm
 * paper and dark ink with a single green that only ever means *state* — so the
 * site is the same material, and a visitor who downloads the app finds the
 * thing they were just looking at.
 *
 * `paper(v)` in the app returns (v+14, v+11, v): every light surface is one
 * value pushed warm on the red and green channels. `inkTone(v)` returns
 * (v+6, v+4, v). Both ladders are reproduced here rather than eyeballed.
 */

:root {
  /* ---- Paper. The ground, in four steps of one warm ladder. ---- */
  --paper: #f7f4ec;         /* paper(0xE9) — the page */
  --paper-raised: #fffdf6;  /* a card sitting on it */
  --paper-sunk: #efebe0;    /* a well cut into it */
  --paper-edge: #e2ddcd;    /* hairlines and rules */

  /* ---- Ink. Four weights, never a pure black. ---- */
  --ink: #17150f;           /* headlines */
  --ink-body: #3d382c;      /* running text */
  --ink-quiet: #6f6a5c;     /* captions, labels */
  --ink-faint: #9b9585;     /* the quietest legible step */

  /* ---- The one colour. Spent on state, never on decoration. ---- */
  --accent: #1f7a62;
  --accent-quiet: #cfe3da;
  --accent-ink: #0f4d3c;

  /* ---- Type ----
   *
   * Two faces, and only one of them is downloaded.
   *
   * **Headlines: Bricolage Grotesque**, a variable grotesque with real
   * character — tight apertures, a slight wobble in the curves, and an optical
   * size axis so a 100px headline is not just a scaled-up 16px one. It is
   * SIL Open Font Licence, self-hosted, and one file covers every weight the
   * site uses.
   *
   * It is a **sans**, deliberately. A display serif was the obvious answer for
   * a warm-paper editorial page, and the docs record why not: the competitor's
   * headline face is EB Garamond, and a serif headline is the single
   * typographic gesture their product is known for. This is characterful
   * without borrowing it.
   *
   * **Body: the system face.** No second download, no flash on the paragraph a
   * visitor is actually reading, and text set in the reader's own system face
   * is text that looks native to the machine the app runs on.
   */
  --display: "Bricolage Grotesque", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, sans-serif;
  --face: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI",
    Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* A modular scale that stays readable at 320px, using clamp so nothing
   * needs a breakpoint to be the right size. */
  --step--1: clamp(0.82rem, 0.79rem + 0.15vw, 0.9rem);
  --step-0: clamp(1rem, 0.96rem + 0.2vw, 1.09rem);
  --step-1: clamp(1.2rem, 1.1rem + 0.5vw, 1.45rem);
  --step-2: clamp(1.55rem, 1.35rem + 1vw, 2.1rem);
  --step-3: clamp(2rem, 1.6rem + 2vw, 3.1rem);
  --step-4: clamp(2.6rem, 1.9rem + 3.4vw, 4.6rem);
  --step-5: clamp(3.1rem, 2rem + 5.2vw, 6.4rem);

  /* ---- Space. An 8pt grid with two smaller steps for type. ---- */
  --s-3xs: 2px;  --s-2xs: 4px;  --s-xs: 8px;   --s-s: 12px;
  --s-m: 16px;   --s-l: 24px;   --s-xl: 32px;  --s-2xl: 48px;
  --s-3xl: 72px; --s-4xl: 112px; --s-5xl: 160px;

  --measure: 62ch;      /* prose never runs wider */
  --page: 1180px;       /* the content column */
  --page-narrow: 780px;

  --radius-s: 8px;
  --radius-m: 14px;
  --radius-l: 22px;
  --radius-xl: 32px;

  /* Elevation is warm too — a neutral grey shadow on warm paper reads as
   * dirt. These are the ink hue at low alpha. */
  --lift-1: 0 1px 2px rgba(23, 21, 15, 0.05), 0 2px 8px rgba(23, 21, 15, 0.04);
  --lift-2: 0 2px 6px rgba(23, 21, 15, 0.06), 0 12px 32px rgba(23, 21, 15, 0.07);
  --lift-3: 0 4px 12px rgba(23, 21, 15, 0.08), 0 28px 70px rgba(23, 21, 15, 0.1);

  /* One easing for everything that moves, so the site has one hand. */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* **Light is the default, deliberately.** The block that used to sit here
 * switched the whole site to dark whenever macOS was set that way, which meant
 * most visitors never saw the design the product is actually built around —
 * warm paper and ink, the same material as the app's own light mode.
 *
 * Dark is still fully designed and one click away; it is now a choice rather
 * than an accident of somebody's system settings.
 *
 * Dark is the app's "glass" mode: a near-black that keeps a trace of the same
 * warmth, so the two are one family rather than a photo negative. */
:root[data-theme="dark"] {
  --paper: #15140f;
  --paper-raised: #1e1c16;
  --paper-sunk: #100f0b;
  --paper-edge: #2e2b22;

  --ink: #f6f2e6;
  --ink-body: #d3cdbd;
  --ink-quiet: #9a9484;
  --ink-faint: #6b6659;

  --accent: #5fc2a3;
  --accent-quiet: #23433a;
  --accent-ink: #a7dfcb;

  --lift-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --lift-2: 0 2px 6px rgba(0, 0, 0, 0.45), 0 12px 32px rgba(0, 0, 0, 0.4);
  --lift-3: 0 4px 12px rgba(0, 0, 0, 0.5), 0 28px 70px rgba(0, 0, 0, 0.45);
}