/* ─────────────────────────────────────────────────────────────
   Design tokens v2 — 方格稿紙. Layer 1 (基礎) of brand/design-layers.md.

   COLOUR IS GENERATED: everything between the BEGIN/END colour markers comes
   from brand/tokens.json via `python3 brand/build-tokens.py` — edit the JSON,
   never the block. Type, spacing and component sizes below it are still
   hand-written here (and copied by hand into GPTokens.swift).

   tokens.css is no longer a palette of its own: it maps the v1 names
   (--paper, --ink …) onto these values for pages not yet moved to v2.

   Three token tiers — all of them inside layer 1 (基礎) of the five design
   layers in brand/design-layers.md. Each tier reads only from the one above it.
     1. primitives  raw values, named by what they are (blue-700)
     2. roles       named by what they do (--gp-label, --gp-rule)
     3. components  sizes and shapes per component; the only layer that
                    differs between landing and app (see [data-surface="app"])

   Light only. Dark mode has not been designed.
   Shown in design/styleguide.html (design/index.html has all five layers).
   ───────────────────────────────────────────────────────────── */

:root {
  /* ── BEGIN colour — DO NOT EDIT — generated from brand/tokens.json by brand/build-tokens.py ── */

  /* ══ 1. primitives ═════════════════════════════════════════ */

  /* paper */
  --gp-white: #FFFFFF;
  --gp-paper-100: #FAF9F4;

  /* 作業簿藍: the rules of a school exercise book, light to dark */
  --gp-blue-50: #F1F4F8;
  --gp-blue-75: #E8EDF6;
  --gp-blue-100: #E5EAF3;
  --gp-blue-200: #D3DDEC;
  --gp-blue-300: #AFC1DE;
  --gp-blue-400: #9FB3D6;
  --gp-blue-700: #2F4F8A;
  --gp-blue-800: #1F3766;
  --gp-blue-900: #2A3346;
  --gp-blue-950: #161B26;

  /* ink: warm near-blacks */
  --gp-ink-900: #1E1E1C;
  --gp-ink-800: #34342F;
  --gp-ink-700: #44443E;
  --gp-ink-500: #6C6C64;

  /* 朱 — the app icon's red. Buttons, eyebrows, 一二三, and the teacher's pen */
  --gp-red-700: #9C2B22;
  --gp-red-800: #7E2019;
  --gp-red-50: #F7EAE8;

  /* 石綠 — correct, and nothing else. 500 is 2.6:1 on white, so it is only ever a
     fill (the 3-28 gain segment, next to the blue); green you read is 700 */
  --gp-green-500: #4BB283;
  --gp-green-700: #37765F;
  --gp-green-50: #E7F0EB;

  /* 金 — Premium, and the progress fill. 500 is 2.2:1 on white, so it is only
     ever a fill. Gold that has to be read (a word, a stamp's ring) is 700, 5.4:1
     on white */
  --gp-gold-300: #F2CC6B;
  --gp-gold-500: #E3A21A;
  --gp-gold-700: #8F6206;

  /* 黃 — the starred ★ and nothing else (10/15). One flat yellow, never a
     gradient, which keeps it apart from the gold leaf */
  --gp-yellow-500: #E8AE00;

  /* 杏 — 差一點, the highlighter, and what you got wrong in practice (錯題重做, the 差一點
     share of 3-3) (1-7), and nothing else. A low-chroma warm between 朱 and 金, so
     a near miss reads as neither the pen nor Premium: ΔE2000 ≈ 14 from red-700
     and 15 from gold-700. 700 is 5.3:1 on white, so it is both a word and a fill
     under white text; 200 is the highlighter, only ever behind ink (11.5:1) */
  --gp-apricot-50: #FAEBDD;
  --gp-apricot-200: #F5CFAE;
  --gp-apricot-700: #9A5B3C;

  /* 紫 — 字 (10/15): the flashcard tile, the 「可能不熟的字」 block. Decoration, not a
     state; nothing is ever read in it but the 字 drawn on it */
  --gp-plum-50: #E9E1F2;
  --gp-plum-700: #6B4C8F;

  /* on the blue-black band: warm whites */
  --gp-warm-50: #FAF9F7;
  --gp-warm-400: #A9A296;

  /* ══ 2. roles ══════════════════════════════════════════════ */

  /* grounds */
  --gp-bg: var(--gp-paper-100);  /* Page ground. */
  --gp-bg-tint: var(--gp-blue-50);  /* Secondary ground: secondary bands, an icon's tile, a pressed card, an option's letter key. */
  --gp-surface: var(--gp-white);  /* Cards, cells, option rows. */
  --gp-select-tint: var(--gp-blue-75);  /* A picked or hovered row, the segmented control's track, the paid column. */
  --gp-chip-ground: color-mix(in srgb, var(--gp-ink-500) 12%, transparent);  /* `2-3` chip: a faint grey, not blue — a chip isn't pressable. */
  --gp-night: var(--gp-blue-950);  /* The night blue the landing page closes on (closing band, footer). Shadows on the lifted card are cast in it. */
  --gp-on-night: var(--gp-warm-50);  /* Text on `night`. */
  --gp-on-night-muted: var(--gp-warm-400);

  /* rules, faintest to strongest */
  --gp-rule-soft: var(--gp-blue-100);  /* Inside a list, app card edges. */
  --gp-rule: var(--gp-blue-200);  /* Ruled lines under reading text, a meter's track. */
  --gp-guide: var(--gp-blue-300);  /* The 田字格's dashed cross, the page grid. */
  --gp-rule-strong: var(--gp-blue-400);  /* Cell and card outlines, an option row's frame, the header rule. */
  --gp-rule-ink: var(--gp-blue-700);  /* The 3px rule on top of a card or a list; the 田字格's frame. */
  --gp-rule-night: var(--gp-blue-900);

  /* text */
  --gp-text: var(--gp-ink-900);
  --gp-text-body: var(--gp-ink-800);
  --gp-text-2: var(--gp-ink-700);
  --gp-text-muted: var(--gp-ink-500);
  --gp-label: var(--gp-blue-700);  /* Blue labels everything that is not red — links included — and in the app it is the main action's fill. */
  --gp-label-deep: var(--gp-blue-800);

  /* red in three places: buttons, section eyebrows, 一二三 */
  --gp-brand: var(--gp-red-700);  /* 朱: eyebrows, 一二三, buttons on the landing page. Identity, never a state. */
  --gp-brand-deep: var(--gp-red-800);
  --gp-on-brand: var(--gp-white);
  --gp-on-fill: var(--gp-white);  /* Text on a blue, green, red or 杏 fill. */

  /* marking: green tick, red pen. The pen is the brand red (one red per page) */
  --gp-correct: var(--gp-green-700);  /* Correct, and the green of a gain about to happen (+838, the new 有效期限). */
  --gp-correct-tint: var(--gp-green-50);
  --gp-gain: var(--gp-green-500);  /* The part of a meter this moment just added (3-28, 10/16). A fill only: the +1 above it is `correct`. */
  --gp-correct-edge: color-mix(in srgb, var(--gp-correct) 45%, var(--gp-rule-strong));  /* The 我懂了 button's edge. */
  --gp-wrong: var(--gp-red-700);
  --gp-wrong-tint: var(--gp-red-50);
  --gp-wrong-edge: color-mix(in srgb, var(--gp-wrong) 35%, var(--gp-rule-strong));

  /* 1-7 杏: practice's wrong answer said in a softer voice — 差一點, with the answer
     shown at once (no second try). Practice only; the mock exam marks nothing
     until the end. Like right/wrong it never stands alone: a cross and a word go
     with it. Also what you got wrong in practice, looked back on — never red.
     The highlighter marks the words an explanation leans on, in the source and
     in the explanation alike */
  --gp-near: var(--gp-apricot-700);
  --gp-near-tint: var(--gp-apricot-50);
  --gp-highlight: var(--gp-apricot-200);  /* The highlighter (`2-14`): behind ink only (11.5:1), never behind a word in colour. */

  /* Premium mark: the gold badge, the 到期章 on the student ID's back, the
     gold-foil unlock button and its -17%/-31% tags, the lock on Premium-only
     rows. Also the progress fill — one gold in the system. Not a right/wrong
     state. `premium` is only a fill (2.2:1 on white): text on it is `text`, gold
     you read is `premium-ink`. Gold on white paper, never on night */
  --gp-premium-hi: var(--gp-gold-300);
  --gp-premium: var(--gp-gold-500);
  --gp-premium-ink: var(--gp-gold-700);

  /* 字 and ★ (10/15): plum for anything about a word rather than an answer; flat
     yellow for a starred word. ☆ unstarred is `text-muted`; filled ★ against
     outlined ☆ carries the state by shape, so the yellow needs no contrast of
     its own */
  --gp-vocab: var(--gp-plum-700);
  --gp-vocab-tint: var(--gp-plum-50);  /* Behind a block of words. A background only. */
  --gp-star: var(--gp-yellow-500);

  /* 2-4 objects: the coloured things on 練習's tiles and 主頁's desk (3-20).
     Decoration, not states — they stay coloured whether lit or not. 題組 is the
     label blue, 字卡 plum, 模擬考 ink, 錯題本 the 杏 of what you got wrong; 今日任務 an ink
     calendar, 新題 a blue envelope, 隨機練習 two blue dice, 繼續練習 a test paper with a ▶ */
  --gp-obj-today: var(--gp-text);
  --gp-obj-new: var(--gp-label);
  --gp-obj-new-tint: var(--gp-select-tint);
  --gp-obj-random: var(--gp-label);
  --gp-obj-random-tint: var(--gp-select-tint);
  --gp-obj-continue: var(--gp-label);
  --gp-obj-sets: var(--gp-label);
  --gp-obj-sets-tint: var(--gp-select-tint);
  --gp-obj-cards: var(--gp-vocab);
  --gp-obj-cards-tint: var(--gp-vocab-tint);
  --gp-obj-mock: var(--gp-text-2);
  --gp-obj-mock-tint: color-mix(in srgb, var(--gp-ink-500) 14%, var(--gp-white));
  --gp-obj-wrong: var(--gp-near);
  --gp-obj-wrong-tint: var(--gp-near-tint);
  --gp-obj-sets-band: color-mix(in srgb, var(--gp-obj-sets-tint) 50%, var(--gp-bg));  /* 練習's sets band: its tile's tint, half paper (10/17). */
  --gp-obj-cards-band: color-mix(in srgb, var(--gp-obj-cards-tint) 50%, var(--gp-bg));  /* 練習's cards band: its tile's tint, half paper (10/17). */
  --gp-obj-mock-band: color-mix(in srgb, var(--gp-obj-mock-tint) 50%, var(--gp-bg));  /* 練習's mock band: its tile's tint, half paper (10/17). */
  --gp-obj-wrong-band: color-mix(in srgb, var(--gp-obj-wrong-tint) 50%, var(--gp-bg));  /* 練習's wrong band: its tile's tint, half paper (10/17). */

  /* progress steps: done / current / to do */
  --gp-step-done: var(--gp-blue-700);
  --gp-step-cur: color-mix(in srgb, var(--gp-blue-700) 45%, var(--gp-blue-200));
  --gp-step-todo: var(--gp-blue-200);

  /* ── END colour ── */

  /* families */
  --gp-font-text: 'Noto Sans TC', system-ui, -apple-system, sans-serif;
  --gp-font-kai: 'LXGW WenKai TC', 'Kaiti TC', 'BiauKai', var(--gp-font-text);  /* characters in cells; landing only, see app below */
  --gp-font-display: 'Space Grotesk', var(--gp-font-text);                       /* numbers, A B C D */
  --gp-font-brush: 'Ma Shan Zheng', var(--gp-font-text);                         /* 一二三 only */
  --gp-font-wordmark: 'Literata', var(--gp-font-display);                        /* 10min TOCFL only */
  --gp-font-latin: system-ui, -apple-system, 'Helvetica Neue', sans-serif;         /* translations in Latin script */

  /* type scale (size / weight / tracking). Hierarchy is size, weight, case,
     colour — never a change of family */
  --gp-fs-display: clamp(29px, 4.9vw, 68px);  /* hero h1 */
  --gp-fs-h2: clamp(32px, 4vw, 44px);
  --gp-fs-h3: clamp(21px, 2.4vw, 26px);
  --gp-fs-hero: 34px;                         /* app: the one thing per screen (主角), see design-system.md〈一眼看到重點〉 */
  --gp-fs-title: 20px;                        /* web only; app section titles are lead/600 */
  --gp-fs-lead: 17px;                         /* app body, button label */
  --gp-fs-body: 16px;
  --gp-fs-small: 14px;
  --gp-fs-meta: 13px;
  --gp-fs-caption: 12px;
  --gp-fs-eyebrow: 11.5px;
  --gp-fs-ruby: 10px;                         /* 讀音標註（2-30）：題目字上的拼音、注音 */
  --gp-track-eyebrow: .28em;                  /* uppercase, 700 */
  --gp-track-chip: .14em;
  --gp-lh-body: 1.65;
  --gp-lh-reading: 1.75;

  /* line widths */
  --gp-w-hair: 1px;     /* every outline */
  --gp-w-cell: 1.5px;   /* 田字格 frame, selected option, marking states */
  --gp-w-head: 3px;     /* the rule on top of a card, a list, a table head */

  /* the ruled page grid and the 田字格 cross */
  --gp-pitch: 44px;
  --gp-ruled:
    linear-gradient(to right, color-mix(in srgb, var(--gp-guide) 32%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in srgb, var(--gp-guide) 32%, transparent) 1px, transparent 1px);
  --gp-cross:
    repeating-linear-gradient(to bottom, var(--gp-guide) 0 3px, transparent 3px 6px) center / 1px 100% no-repeat,
    repeating-linear-gradient(to right, var(--gp-guide) 0 3px, transparent 3px 6px) center / 100% 1px no-repeat;

  /* spacing, 4px base */
  --gp-s1: 4px;
  --gp-s2: 8px;
  --gp-s3: 12px;
  --gp-s4: 16px;
  --gp-s5: 20px;   /* app page margin */
  --gp-s6: 24px;
  --gp-s8: 32px;
  --gp-s11: 44px;  /* one grid pitch; also the minimum hit target */
  --gp-s14: 56px;
  --gp-s20: 80px;

  /* ══ 3. components — landing (default) ═════════════════════ */

  /* paper has square corners and nothing floats — except answer options,
     which are rounded keys on both surfaces */
  --gp-radius-btn: 0;
  --gp-radius-card: 0;
  --gp-radius-pill: 0;
  --gp-radius-opt: 16px;
  --gp-radius-key: 50%;    /* A B C D on an option */
  --gp-shadow-opt: none;
  --gp-shadow-seg: none;

  --gp-btn-h: 48px;
  --gp-btn-h-sm: 36px;
  --gp-btn-pad: 0 24px;
  --gp-btn-fs: 15.5px;
  --gp-pill-h: 32px;
  --gp-opt-min-h: 48px;
  --gp-opt-key: 28px;
  --gp-cell: 1.6em;        /* one character to a cell */
  --gp-step-h: 4px;
}

/* the app keeps iOS shapes — rounded cards, capsules — in the same colours.
   Squares and the grid are kept for word cards only. */
[data-surface="app"] {
  /* no 楷體 in the app: LXGW WenKai writes many characters in variant forms
     that a learner should not copy. Cells use the app's own face (appCardFace,
     Noto Sans TC regular) until a 楷體 with standard 國字 forms is chosen. */
  --gp-font-kai: var(--gp-font-text);

  --gp-pitch: 22px;
  --gp-radius-btn: 16px;
  --gp-radius-card: 16px;
  --gp-radius-pill: 999px;
  --gp-shadow-opt: 0 1px 2px color-mix(in srgb, var(--gp-blue-950) 5%, transparent);
  --gp-shadow-seg: 0 1px 3px color-mix(in srgb, var(--gp-blue-950) 12%, transparent);

  --gp-btn-h: 54px;
  --gp-btn-h-sm: 34px;
  --gp-btn-pad: 0 20px;
  --gp-btn-fs: 17px;
  --gp-pill-h: 34px;
  --gp-opt-min-h: 48px;
  --gp-opt-key: 28px;
  --gp-step-h: 5px;
}