/* ─────────────────────────────────────────────────────────────────────────────
   Gushi — the tokens. One palette, one type scale, read by every web surface.

   THIS FILE EXISTS BECAUSE THERE ARE NOW TWO WEB PRODUCTS. The marketing site
   (site.css) and the Teaching Platform (platform.css) are different designs
   with different jobs, and the one thing they must never disagree about is
   what colour anything is. `docs/brand.md` tracks this palette across the iOS
   app, the story-art brief and the web, and `GushiUITests/PaletteTests.swift`
   asserts ΔE2000 separation and WCAG AA contrast on the app's copy of it — so a
   second, drifting copy of these hexes on the web was the obvious way to make
   that test a liar.

   It was lifted verbatim out of site.css. Nothing was renamed and no value
   changed, so the site renders identically; the only new thing is the growth
   ramp at the bottom, which nothing on the marketing site uses.

   LINK IT FIRST. Both stylesheets are plain <link> elements rather than an
   @import chain, because @import costs a serial round trip before a single
   pixel can paint, and these pages are meant to be fast on a school's wifi.
   ──────────────────────────────────────────────────────────────────────────── */

:root {
  /* ── Ink. The app's own ground. Absolute; never remapped. ──────────────── */
  --ink: #15140F;
  --ink-sunken: #1B1A14;
  --ink-card: #1F1D17;
  --ink-fg: #ECE6D8;
  --ink-fg-2: #A39B8B;
  --ink-muted: #948B7A;               /* was #6F685B — 3.34:1, failed AA on ink */
  --ink-hair: rgba(236, 230, 216, .12);
  --ink-seal-text: #E9A08F;           /* 8.68:1 — the accent as TEXT, not as fill */

  /* ── Paper. The warm light ground for reading. ─────────────────────────── */
  --paper: #F4F1E9;
  --paper-sunken: #EDE9DF;
  --paper-card: #FFFDF8;
  --paper-fg: #1A1813;
  --paper-fg-2: #5B5546;
  --paper-muted: #6F685B;             /* was #8A8271 — 3.38:1, failed AA on paper */
  --paper-hair: rgba(26, 24, 19, .14);
  --paper-seal-text: #A83A25;         /* 5.64:1 — #C8452E as a link is 4.29:1 and fails */

  /* ── Seal red. One voltage colour, and it ignores the scheme by design.
        Twice per page at most: the 故事 chop, and the one primary button.
        Scarcity is what gives it weight — see docs/brand.md. ─────────────── */
  --seal: #C8452E;
  --seal-press: #D8512F;
  --seal-on: #FFFFFF;                 /* 4.84:1 on seal */
  --seal-soft: rgba(200, 69, 46, .12);

  /* ── The five tone colours. Fixed everywhere pinyin appears, in the app and
        here, because that consistency is the point of the system. ────────── */
  --t1: #D85C50;
  --t2: #E0A23C;
  --t3: #5FA86A;
  --t4: #5B8BC9;
  --t5: #8C857A;
  --jade: #5FA86A;
  --amber: #E0A23C;

  /* ── Scheme: PAPER, always. ─────────────────────────────────────────────
        This used to follow prefers-color-scheme, which meant anyone with their
        OS in dark mode saw the ink version and never the design that was
        actually being worked on. The site is a light document; the app is the
        dark one. The ink tokens above stay because docs/brand.md tracks them
        as one palette across four consumers — nothing here resolves to them.
        Re-enabling dark is one @media block, kept at the bottom of this file. */
  --bg: var(--paper);
  --bg-sunken: var(--paper-sunken);
  --card: var(--paper-card);
  --fg: var(--paper-fg);
  --fg-2: var(--paper-fg-2);
  --muted: var(--paper-muted);
  --hair: var(--paper-hair);
  --seal-text: var(--paper-seal-text);
  --shadow: 0 1px 2px rgba(26, 24, 19, .04), 0 12px 30px -24px rgba(26, 24, 19, .3);

  /* ── The document grid ─────────────────────────────────────────────────
        Every page is one grid: a narrow RAIL carrying the section number and
        label, and a wide COLUMN carrying the heading and the content. A
        hairline runs across BOTH at the top of every row, which is the thing
        that makes the page read as a document rather than as a stack of
        centred cards.

        --measure still caps running text inside the column; the column itself
        is wider so a table has somewhere to go. */
  --pad: clamp(16px, 3.4vw, 48px);      /* the page's own margin, fluid */
  --maxw: 1560px;                        /* only stops it on a very wide display */
  --rail: clamp(112px, 12vw, 190px);
  --gutter: clamp(22px, 3vw, 56px);
  --measure: 66ch;                       /* running text, in characters not pixels */
  --doc: var(--maxw);
  --column: var(--maxw);
  --wide: var(--maxw);
  --radius: clamp(14px, 1.6vw, 22px);
  --section: clamp(48px, 6.4vw, 104px);

  /* Type. One scale, both languages.
     --fs-display is the door only. Everywhere else uses --fs-h1, because
     /teaching's German H1 already runs to three lines and the display size
     would make it four. */
  --fs-display: clamp(40px, 7.4vw, 104px);
  --fs-h1: clamp(32px, 4.4vw, 60px);
  --fs-h2: clamp(24px, 2.6vw, 38px);
  --fs-h3: clamp(18px, 1.4vw, 22px);
  --fs-lead: clamp(17px, 1.4vw, 22px);
  --fs-body: clamp(16px, 1.05vw, 18px);
  --fs-small: clamp(14.5px, .95vw, 16px);
  --fs-fine: clamp(13px, .85vw, 14.5px);

  color-scheme: light;
/* ── The growth ramp, for the platform's data. Paper tints of the jade above.
      `docs/brand.md` carries a growth ramp already, but its four steps climb
      out of INK (#20301C -> #8FCD72) and the platform sits on paper, where the
      dark end of that ramp is the loudest thing on the page rather than the
      quietest.

      These are the same colour, mixed toward --paper-sunken at 25/50/75/100 %.
      No new hue enters the palette, which is the whole rule: the ramp is a
      derivation of jade, not a fifth accent. It is SEQUENTIAL because the thing
      it encodes — how well a learner knows something — is one quantity on one
      axis. Encoding it categorically would need four unrelated hues, and the
      first question a teacher asks of a chart like that is which colour is
      better, which is exactly what a sequential ramp answers without a legend.

      --growth-0 is "nothing here", and it is the sunken paper rather than a
      pale green: an empty day must not read as a small amount of work. */
  --growth-0: var(--paper-sunken);
  --growth-1: #C9D9C2;
  --growth-2: #A6C8A4;
  --growth-3: #82B887;
  --growth-4: #5FA86A;                /* == --jade, the top of the ramp */
}