/* ═══════════════════════════════════════════════════════════════════════════
   MathedUp Design System — TOKENS ONLY
   Link THIS file to adopt the design system on an existing page.

   WHY THIS FILE IS SEPARATE FROM mathedup-theme.css.
   Piloted on the GCSE teacher toolkit page 2026-08-30. That page already had
   its own 21 tokens and its own .card class. Linking the full theme silently
   repainted its cards, because the theme also defines .card, .nav, .btn and
   base element styles, and those landed at equal specificity on a page that
   had never asked for them. Measured, not guessed: the toolkit's cards came
   back with the theme's --shadow-sm instead of their own --shadow-lift.

   So: this file declares CUSTOM PROPERTIES AND NOTHING ELSE. It contains no
   selector that can collide with a page's own class names, which means any
   existing surface can link it and repoint its local tokens with a few lines,
   with no risk of a silent restyle. mathedup-theme.css keeps the component
   layer for NEW surfaces that opt into it deliberately.

   Do not add a component rule to this file. If you need one, it belongs in
   mathedup-theme.css, namespaced.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ─────────────────────────────────────────────────────────────────────────
     GROUNDS — there are two, and which one you use is a real decision.

     --md-desk is the darker ground a SHEET sits on. Use it only when the page
     renders paper as an object with an edge and a shadow (the homepage, an
     exam page, a worksheet). It is deliberately darker than the sheet so the
     sheet reads as a thing lying on something.

     --md-chalk is the ground for a page that IS the surface, with no sheets
     on it (a quiz, a dashboard, a topic page). Content blocks sit on
     --md-paper or --md-white directly against it.

     Using desk without sheets makes a page look dirty; using chalk under
     sheets makes the sheets vanish. Pick from what the page renders.
     ───────────────────────────────────────────────────────────────────────── */
  --md-desk: #E9E4DA;
  --md-desk-deep: #DED8CB;      /* pressed/hover tint for a neutral control */
  --md-chalk: #F6F3EC;          /* was #F7F6F3; reconciled to the value design-thesis.md
                                   records as what the live site actually ships */
  --md-paper: #FFFDF8;          /* a sheet; the toolkit's value, warmer than the
                                   homepage's original #FDFCFA so the whole ground family
                                   comes from one considered source */
  --md-paper-edge: #DDD6C8;     /* a sheet's trim border; also the masthead/footer rule */
  --md-white: #FFFFFF;
  --md-ash: #EFEBE2;            /* was #EEECE7; same reconciliation */

  /* ─────────────────────────────────────────────────────────────────────────
     INK
     ───────────────────────────────────────────────────────────────────────── */
  --md-ink: #1A1917;            /* printed text */
  --md-ink-soft: #3B372E;       /* secondary prose */
  --md-muted: #6B6862;          /* the page's own small furniture: labels, marks, captions */
  --md-text: var(--md-ink);
  --md-text-secondary: var(--md-ink-soft);
  --md-text-tertiary: var(--md-muted);

  /* ─────────────────────────────────────────────────────────────────────────
     RULES AND EDGES — three weights, three meanings. See THE HAIR-IS-NOT-AN-
     EDGE RULE at the foot of this file; do not collapse these into one token.
     ───────────────────────────────────────────────────────────────────────── */
  --md-rule: #1B1E24;           /* 2.5px structure, 1.5px box borders */
  --md-hair: #CFC8B9;           /* 1px NON-INTERACTIVE divisions only */
  --md-edge: #96907F;           /* the boundary of anything pressable; 3.11:1 on paper */
  --md-border: #E7E1D6;         /* the soft legacy border used across the live site */
  --md-border-light: #E7E1D6;
  --md-border-dark: #CBC8C0;

  /* ─────────────────────────────────────────────────────────────────────────
     ACTION AND STATE — reserved meanings. Nothing decorative may take these.
     ───────────────────────────────────────────────────────────────────────── */

  /* ─────────────────────────────────────────────────────────────────────────
     ACCENT AND SUCCESS WERE CHANGED 2026-08-30, and it was a defect fix rather
     than a preference. The previous values were #DC2626 and #059669, typed by
     hand 261 times across the builders. Measured against the site's OWN cream
     ground (#F6F3EC): #DC2626 scored 4.36:1, under the 4.5:1 floor for body
     text, and #059669 scored 3.40:1, far under. Both now pass at 4.82 and 4.95.
     #DC2626 was also Tailwind red-600 byte for byte, i.e. a framework default
     nobody had actually chosen; the replacements come from the teacher toolkit,
     the newest considered design work on the site, and sit slightly warmer
     (hue 7 rather than 0) which is why they settle on warm cream.
     Do not "restore the brand red" without re-running that measurement.
     ───────────────────────────────────────────────────────────────────────── */
  --md-accent: #C8321F;         /* the marking hand AND the primary action */
  --md-accent-hover: #A82A19;
  /* The one honest exception to "the new coral everywhere". Measured on the
     games' own dark grounds: #C8321F scores 3.34:1 on #0F172A and only 2.74:1
     on the Climb series' #1E293B, under the 3:1 floor for a large control. The
     old #DC2626 was not much better (3.03:1 there). A darker accent cannot
     carry a dark surface, so dark themes take this lighter sibling of the same
     hue instead: 4.68:1 on #0F172A. Never use it on paper, where it is 3.81:1
     and fails as body text. */
  --md-accent-on-dark: #E0543F;
  --md-accent-active: #8F2415;
  --md-accent-wash: #FBF1EF;
  --md-accent-dim: rgba(200, 50, 31, 0.08);
  --md-accent-light: rgba(200, 50, 31, 0.12);
  --md-accent2: #EA580C;
  --md-success: #047857;        /* a mark was earned / complete */
  --md-success-wash: #E6F2EE;
  --md-warning: #D97706;
  --md-link: #1D4ED8;           /* body links at rest; never a button fill */

  /* ─────────────────────────────────────────────────────────────────────────
     SIX-STRAND TOPIC COLOURS — a validated categorical set, site-wide.
     Tints a topic LABEL and nothing else, so it never competes with the
     accent/success axis. See THE ONE COLOUR DIMENSION RULE.
     ───────────────────────────────────────────────────────────────────────── */
  --md-strand-number: #2a78d6;
  --md-strand-algebra: #eb6834;
  --md-strand-ratio: #1baf7a;
  --md-strand-geometry: #e87ba4;
  --md-strand-probability: #008300;
  --md-strand-statistics: #7c3aed;

  /* Legacy compatibility — kept so a surface can adopt the file without a rename */
  --bg: var(--md-chalk);
  --surface: var(--md-white);
  --surface2: var(--md-ash);
  --border: var(--md-border);
  --text: var(--md-text);
  --text2: var(--md-text-secondary);
  --text3: var(--md-text-tertiary);
  --accent: var(--md-accent);
  --accent-h: var(--md-accent-hover);
  --accent-dim: var(--md-accent-dim);

  /* ─────────────────────────────────────────────────────────────────────────
     SPACING SCALE (base unit: 4px)
     ───────────────────────────────────────────────────────────────────────── */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 16px;
  --space-xl: 20px;
  --space-2xl: 24px;
  --space-3xl: 32px;
  --space-4xl: 40px;

  /* ─────────────────────────────────────────────────────────────────────────
     RADIUS — print corners, not card corners. A sheet takes the trim radius;
     a ruled box takes 3px; a control 5px; the one primary action 7px.
     The larger legacy radii are kept for surfaces that are not paper.
     ───────────────────────────────────────────────────────────────────────── */
  --r-sheet: 2px;
  --r-box: 3px;
  --r-control: 5px;
  --r-action: 7px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;

  /* ─────────────────────────────────────────────────────────────────────────
     TYPOGRAPHY — ONE family. design-system.md documents Syne as the display
     face and the site has never shipped it; design-thesis.md records that
     correction and this file follows the thesis. Hierarchy comes from weight
     and size, not from a second face. Caveat is the marking hand only.
     ───────────────────────────────────────────────────────────────────────── */
  --font-body: 'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: var(--font-body);
  --font-hand: 'Caveat', ui-rounded, cursive;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* ─────────────────────────────────────────────────────────────────────────
     SHADOWS — warm-brown, because these are sheets on a desk, never neutral
     grey and never a hard offset. See THE PAPER-ONLY RULE.
     ───────────────────────────────────────────────────────────────────────── */
  --shadow-sheet: 0 1px 1px rgba(60,48,30,.07), 0 10px 26px -14px rgba(60,48,30,.34);
  --shadow-slip:  0 1px 1px rgba(60,48,30,.08), 0 12px 26px -12px rgba(60,48,30,.4);
  --shadow-action: 0 1px 2px rgba(120,20,20,.22), 0 4px 12px -4px rgba(120,20,20,.3);
  --shadow-action-hover: 0 2px 4px rgba(120,20,20,.24), 0 8px 18px -6px rgba(120,20,20,.36);
  --shadow-sm: 0 1px 2px rgba(26, 25, 23, 0.04);
  --shadow-md: 0 1px 4px rgba(26, 25, 23, 0.08);
  --shadow-lg: 0 4px 12px rgba(26, 25, 23, 0.12);
  --shadow-xl: 0 12px 32px rgba(26, 25, 23, 0.16);

  /* ─────────────────────────────────────────────────────────────────────────
     MOTION
     ───────────────────────────────────────────────────────────────────────── */
  --transition-fast: 0.15s cubic-bezier(.2,.8,.3,1);
  --transition-base: 0.2s cubic-bezier(.2,.8,.3,1);
  --transition-slow: 0.3s cubic-bezier(.2,.8,.3,1);
}

/* ═══════════════════════════════════════════════════════════════════════════
   THE NAMED RULES (short form; the full statements live in DESIGN.md)

   THE TWO JOBS RULE
     --md-accent is the marking hand and the primary action. If a coral thing is
     neither a mark nor the one action on the page, it is wrong.

   THE HAIR-IS-NOT-AN-EDGE RULE
     --md-hair rules divisions and may never bound a control. --md-edge bounds
     controls and may never rule a division. A hairline is legible at 1.6:1 as a
     division but not as an affordance, which is why they were separated. Do not
     re-merge them.

   THE ONE COLOUR DIMENSION RULE
     A mark carries one colour meaning. The strand palette tints a topic label
     and nothing else, precisely so it never competes with the marking axis.

   THE INK FURNITURE RULE
     Solid ink filled with white text says "this is printed on the form": a
     selected tier, an audience chip, an open menu heading. Never a button.

   THE COLOUR-PLUS-SHAPE RULE
     No state is signalled by colour alone. Correct is sage AND a tick AND a
     sentence; a focused field gains a ring, not merely a recoloured border.

   THE ONE VOICE RULE
     Outfit sets every word the page prints. Caveat is the hand that marks the
     page, never a display face, never a heading, never a button.

   THE ARTWORK WORDMARK RULE
     The MathedUp! name is never set in type. Mathedup_Logo_original.png on a
     light ground, Mathedup_Logo_white.png on a dark one, always width:auto.

   THE PAPER-ONLY RULE
     Shadow belongs to paper and to the one primary action. Anything else that
     wants to look raised is asking to be a card, and this system has no cards.

   THE TABULAR RULE
     Set font-variant-numeric: tabular-nums on the body. Marks, percentages and
     mark-scheme codes are read in columns.
   ═══════════════════════════════════════════════════════════════════════════ */