/* ============================================================
   Mira — design tokens · THE SINGLE SOURCE OF TRUTH
   Built on the locked brand (docs/brand/). Every screen imports this;
   values live here once so screens and the catalog can't drift.
   Fonts are SELF-HOSTED here (design/fonts/) via the @font-face block
   below — downloaded once, shared across every page from cache.
   ============================================================ */

/* ---------- FONTS · self-hosted variable woff2 (load once, cache everywhere) ---------- */
/* Atkinson Hyperlegible Next — Mira's voice + UI (variable 400–700) */
@font-face{font-family:"Atkinson Hyperlegible Next";font-style:normal;font-weight:400 700;font-display:optional;
  src:url("fonts/atkinson-hyperlegible-next-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Atkinson Hyperlegible Next";font-style:normal;font-weight:400 700;font-display:optional;
  src:url("fonts/atkinson-hyperlegible-next-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
/* Atkinson Hyperlegible Mono — meta, timestamps, figures (variable 400–700) */
@font-face{font-family:"Atkinson Hyperlegible Mono";font-style:normal;font-weight:400 700;font-display:optional;
  src:url("fonts/atkinson-hyperlegible-mono-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Atkinson Hyperlegible Mono";font-style:normal;font-weight:400 700;font-display:optional;
  src:url("fonts/atkinson-hyperlegible-mono-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  /* ---------- PRIMITIVES ---------- */

  /* ===== 4 SOURCE colours — paper · white · ink · plum (D157). Everything below is DERIVED. ===== */
  --color-paper:#FBF6F8;          /* surface */
  --color-ink:#A4105B;            /* brand accent — the mark, primary action, links, emphasis */
  --color-white:#FFFFFF;          /* input / card surface */
  --color-plum:#220B17;           /* THE PRIMARY TEXT COLOUR — body text and its text derivatives (muted, placeholder); ≈17:1 on paper. Non-text roles (boundaries, wash) derive from ink as of D173; the mark itself is all-ink (no plum) */
  /* ----- DERIVED from the four ----- */
  --color-plum-muted:color-mix(in srgb, var(--color-plum) 74%, var(--color-paper));  /* ≈#5A4852 · 7.9:1 on paper · from plum */
  --color-ink-hover:color-mix(in srgb, var(--color-ink), black 26%);   /* ≈#790C43 · white-on 10.7:1 · from ink */
  --color-ink-press:color-mix(in srgb, var(--color-ink), black 44%);   /* ≈#5C0933 · white-on 13.7:1 · press "stamp" (D39) + the ceremonial accent (D157) */
  /* boundary + divider — ONE ink derivative (D173; was plum) for the bar, rows, options, inputs AND every
     visible rule (hairline retired, D169: a divider marks a boundary = meaning = ≥3:1; otherwise whitespace) */
  --color-border:color-mix(in srgb, var(--color-ink) 75%, var(--color-paper));            /* ≈#BA4A82 · 4.5:1 on paper · solid = enabled, dashed = disabled (still ≥3:1, 1.4.11) */
  --color-placeholder:color-mix(in srgb, var(--color-plum) 60%, var(--color-paper));       /* ≈#796971 · ~5:1 on white · decorative format examples only (AA — never meaning) */
  --color-wash:color-mix(in srgb, var(--color-ink) 5%, transparent);   /* pointer-over state layer · 5% of ink (D173; was plum) — means "under your pointer"; ALWAYS redundant (borders/labels identify controls; keyboard gets the focus ring) — hover exempt from 1.4.11 as transient + never the sole cue (D169) */

  /* type — families (self-hosted above; Next for voice/UI, Mono for meta) */
  --font-sans:"Atkinson Hyperlegible Next",system-ui,sans-serif;
  --font-mono:"Atkinson Hyperlegible Mono",ui-monospace,monospace;

  /* type — weights (Next has the full range) */
  --weight-regular:400;
  --weight-semibold:600;
  --weight-bold:700;            /* named by weight, not use; "emphasis" is a use of it (.is-emphasis) */

  /* type — size scale (rem → respects user zoom, AAA 1.4.4) */
  --size-meta:0.72rem;
  --size-caption:0.8rem;
  --size-label:0.95rem;
  --size-body:1.2rem;             /* ~19px, above the 16px floor */
  --size-heading:clamp(1.75rem,5vw,2.4rem);

  /* type — line height + paragraph rhythm (AAA 1.4.8) */
  --leading-tight:1.15;
  --leading-snug:1.45;
  --leading-body:1.6;             /* ≥1.5 within paragraphs */
  --space-paragraph:1.6em;        /* ≥1.5× the line-spacing */
  --measure:65ch;                 /* max line length, ≤80 chars */

  /* space + form */
  --space-1:.25rem; --space-2:.5rem; --space-3:.75rem; --space-4:1rem; --space-6:1.5rem; --space-8:2rem;
  --radius-control:14px; --radius-panel:20px; --radius-pill:999px;
  --target:44px;                  /* min interactive target (AAA 2.5.5) */
  --focus-ring:3px solid var(--color-ink);  /* keyboard focus, offset 2px */
}

/* ---------- SEMANTIC TYPE ROLES (compose the primitives) ---------- */
.t-heading{font-family:var(--font-sans);font-weight:var(--weight-semibold);font-size:var(--size-heading);
  line-height:var(--leading-tight);letter-spacing:-.01em;color:var(--color-ink);text-wrap:balance}
.t-body{font-family:var(--font-sans);font-weight:var(--weight-regular);font-size:var(--size-body);
  line-height:var(--leading-body);color:var(--color-plum);max-width:var(--measure)}
.t-body + .t-body{margin-top:var(--space-paragraph)}
.t-label{font-family:var(--font-sans);font-weight:var(--weight-semibold);font-size:var(--size-label);color:var(--color-ink)}
.t-caption{font-family:var(--font-sans);font-weight:var(--weight-regular);font-size:var(--size-caption);
  line-height:var(--leading-snug);color:var(--color-plum-muted)}
.t-meta{font-family:var(--font-mono);font-weight:var(--weight-regular);font-size:var(--size-meta);letter-spacing:.04em;color:var(--color-plum-muted)}
.is-emphasis{font-weight:var(--weight-bold);color:var(--color-ink)}