/* tokens.css — Site design system v2.2.0 «کاغذِ ساده» — FROZEN by owner decision, Sep 2026.
   Spec: _specs/site-design-system.md · registry: _specs/design-registry.md · hash: FREEZE file.
   A restyle is a Claude Design session, never a hand edit. */

:root{
  /* paper + ink — the two structural colors, ratio 11.3:1 */
  --paper:      #F5F1E6;   /* page ground — FLAT since v2.2.0 (ruled repeat retired, owner 2026-09-01); the notebook whisper is the margin rule (--line-gold, 1.5px, inline-start 16px) */
  --paper-rule: #E4D6B8;   /* fine hairline + --line-soft alias target; no longer a page-ground texture */
  --slip:       #FCFAF3;   /* the "raised" surface — a lighter paper laid over paper; see Elevation */
  --ink:        #22334A;   /* primary text, primary border, primary stroke — the only "dark" */
  --ink-soft:   #51617A;   /* secondary text: trust lines, support copy, disabled labels — 5.57:1 on paper */
  --ink-meta:   #7A6A48;   /* quiet meta/eyebrow TEXT (progress line, labels, timestamps) — 4.67:1 on paper, AA-safe */
  --ink-meta-deco: #9A8A66; /* same warm-gold hue for DECORATIVE-ONLY use (rule lines, guide dashes, icon strokes ≥19px bold) — 3.0:1, do not use for body-weight text */
  --line-gold:  #D8C79F;   /* the notebook margin rule + faint guide lines */
  --line-dash:  #C9B98C;   /* dashed hairline: annotation borders, diagnosis underline, style-strip rule */
  --line-disabled: #9DB0C4; /* locked-state dashed card border + locked icon stroke */
  --highlighter: #F5C04E;  /* THE one warm accent — rationed: primary CTA fill, the fix/lift mark, the kicker highlight band. Nothing else. */
  --white:      #FFFFFF;   /* rare — only where a true white is structurally required (rare on this paper system) */

  /* on-color text pairs, measured WCAG contrast */
  --on-paper:        var(--ink);        /* 11.34:1 */
  --on-paper-soft:   var(--ink-soft);   /* 5.57:1  */
  --on-paper-meta:   var(--ink-meta);   /* 4.67:1  */
  --on-slip:         var(--ink);        /* ~11:1, slip is lighter than paper */
  --on-highlighter:  var(--ink);        /* 7.64:1 — ink text on the highlighter fill */
  --on-ink:          var(--paper);      /* 11.34:1 reversed — reserved, rarely used (no navy-deep hero in this system; see D8) */

  /* type: two families, one ladder */
  --font-fa: 'Vazirmatn', 'Vazirmatn Fallback', Tahoma, sans-serif;   /* body/UI, weights 500/600/700 only */
  --font-en: 'Vazirmatn', 'Vazirmatn Fallback', sans-serif;
  --font-display: 'Markazi Text', serif;                              /* headlines + the kicker mark, weight 700 only */

  /* type ladder — 8 px steps (D8 SETTLED: 16px wins, see handoff.md) */
  --fs-caption: 11px;   /* badges, tab-bar labels, LTR "A STUDENT WROTE" eyebrow tracking */
  --fs-meta:    13px;   /* quiet chrome: progress line "۲ از ۵ بخش", timestamps, footnotes — uses --ink-meta */
  --fs-body:    16px;   /* Persian reading body, options, controls, buttons, prompts, reveals — THE canonical control size */
  --fs-lead:    19px;   /* lead paragraph, prompt emphasis, card title */
  --fs-h3:      23px;   /* the kicker mark (Markazi), sub-headings */
  --fs-h2:      28px;   /* section headings (Markazi) — e.g. the course-offer h2 */
  --fs-h1:      34px;   /* page title, mobile */
  --fs-display: 40px;   /* hero h1 (Markazi) mobile; desktop clamp(40px,5vw,56px) */

  /* Persian line-heights (floor 1.8 on body) */
  --lh-display: 1.5;  --lh-heading: 1.5; --lh-ui: 1.4; --lh-lead: 1.8; --lh-body: 1.85;
  --lh-en: 1.6; /* Latin runs inside LTR islands */

  /* space — 4px unit, unchanged from the current site ladder */
  --sp-1: 4px;  --sp-2: 8px;   --sp-3: 12px; --sp-4: 16px; --sp-5: 20px;  --sp-6: 24px;
  --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px; --sp-20: 80px; --sp-24: 96px;
  --gutter: 24px;         /* canonical; boards' 22px is an accepted tight-mobile variant down to 360px, never below */
  --measure: 720px;       /* article reading column — never widen */
  --measure-lesson: 680px;

  /* radii — the notebook signature: TWO opposite corners sharp, two rounded (never uniform) */
  --r-surface: 3px 14px 3px 14px;  /* large surfaces: CTA button, hero card */
  --r-row:     2px 12px 2px 12px;  /* list rows: path-map doors, report rows, hairline-row cards */
  --r-control: 2px 10px 2px 10px;  /* controls: option chips, inputs, tappable answers */
  --r-chip:    2px 8px 2px 8px;    /* small badges: "الان اینجایی", status chips */
  --r-pill:    999px;              /* fully-round — rare, reserve for true pill/avatar use */

  /* elevation — NO shadow, NO gradient on any UI surface. See rule below. (non-negotiable #7) */
  --shadow-soft: none;
  --shadow-hover: none;

  /* motion */
  --ease: cubic-bezier(.22,.61,.36,1);
  --dur-fast: 120ms;
  --dur-base: 220ms;
  --dur-stagger: 120ms;    /* offset between staggered reveal beats */
  --dur-slow: 360ms;       /* v2.2.0 — the ONE orchestrated moment a surface may own */

  /* z-index ladder (v2.2.0) — no raw z-index literals in new CSS */
  --z-base: 0; --z-raised: 10; --z-chrome: 50; --z-overlay: 100; --z-top: 999;

  /* breakpoints — unchanged, matches the existing gate */
  --bp-phablet: 600px; --bp-tablet: 768px; --bp-desktop: 1024px;

  /* diagnosis marks */
  --mark-dash: 2px dashed var(--ink);                 /* the trap underline on an English specimen word */
  --mark-annotation-border: 2px dashed var(--line-dash); /* the reveal/annotation left-rule */
  /* non-negotiable #7 forbids gradients on any visible UI surface — the handoff's mark-highlight-band
     is redefined here as a FLAT fill (not the linear-gradient band the handoff literally writes),
     matching the IG carousel's own inset flat-fill highlight for the same reason. */
  --mark-highlight-band: rgba(245,192,78,.5);
  --mark-check-stroke: var(--ink);   /* ✓ — ink stroke, 2.2–2.6px, never filled green */
  --mark-cross-stroke: var(--ink-soft); /* ✗ — ink-soft stroke, same weight family, never red */
}

/* legacy aliases — every custom-property NAME already live in practice/style.css's :root
   keeps resolving under the new system. Values may change; names never break. */
:root{
  --navy: var(--ink);              --navy-deep: var(--ink);       /* system has one ink, not two navies */
  --soft: var(--ink-soft);         --muted: var(--ink-meta-deco);
  --white: #FFFFFF;                --cream: var(--paper);
  --line: var(--line-gold);        --line-soft: var(--paper-rule);
  --radius-card: var(--r-row);     /* was flat 10px; now the notebook row radius */
  --shadow-soft: none;             --shadow-hover: none;  /* was drop shadows; now none, see Elevation rule */
  --pl-accent: var(--highlighter); /* Corridor's amber IS this system's highlighter */
  --on-navy: var(--paper);         --on-navy-body: var(--ink-soft); --on-navy-meta: var(--ink-meta-deco);
  --on-navy-line: var(--line-dash);

  /* the handoff's alias block covers 40 of the 41 old-:root names — --measure-wide is the one
     it misses (header/nav chrome measure, unchanged value, 2026-07-23 origin). Added here so the
     invariant holds: every old custom-property name keeps resolving. */
  --measure-wide: 1100px;

  /* the old 5-step radius scale (--r-sm/--r-md/--r-lg/--r-0, alongside --r-pill which the new
     system already names directly) has no 1:1 in the new 4-surface-class radius family — mapped
     to the closest new surface class rather than left dangling. */
  --r-sm: var(--r-chip);
  --r-md: var(--r-row);
  --r-lg: var(--r-surface);
  --r-0: 0;
  /* Run 9 (2026-08-27) — five legacy names the CONTENT pages' old inline :root defined and the
     sweep dropped (they were never in practice/style.css, so the alias block above never carried
     them). Every residual still reads them; unresolved, the section padding collapsed to 0 and
     Persian text touched the viewport edge (judgment pass 4, six screens). Values = the pre-sweep
     pages' own (git dd85bf93), mobile-first with the ≥768 step below. */
  --space-xs: 48px;
  --space-sm: 64px;
  --space-md: 96px;
  --space-lg: 128px;
  --measure-reading: 720px;
  --measure-article: 640px;
  --radius-button: var(--r-control);
  --on-navy-faint: rgba(255,255,255,0.58);
}
@media (min-width: 768px){
  :root{ --space-xs: 56px; --space-sm: 80px; --space-md: 128px; --space-lg: 160px; }
}