/* ============================================================
   MERIDIAN — Token Sheet (v3, Caldera-derived)

   Reference: caldera.xyz + DESIGN.md. Everything here is taken from
   that direction EXCEPT typography, which is unchanged from v2 by
   instruction — and by necessity, since DM Sans and PP Neue Corp
   Compact ship no Cyrillic and cannot set the Russian half.

     warm light ground: pumice canvas under limestone cards
     deliberately shadowless — hierarchy is colour contrast alone
     heavy radii: 40px cards, 800px pills, 100px inputs
     three chromatic tones only, used sparingly
     1.5px DOTTED rules, never solid, never dashed

   Ember and violet are punctuation, not field colour. The audience is
   bank risk committees, so this pulls back from the reference's own
   saturation.

   Contrast, computed (checker v3, self-tested against hand arithmetic):
     ink            15.58 / 18.71 / 20.23   (canvas / card / raised)
     ink-muted       7.13 /  8.56 /  9.26
     ink-dim         4.60 /  5.52 /  5.97
     ember-ink       4.65 /  5.58
     violet          4.60 /  5.52
     sulfur-ink      4.72 /  5.66
     accent-ink on ember             6.06
     chalk on violet                 5.97
     ink on sulfur                  17.31

   Two traps this palette sets, both measured rather than assumed:
     - Ember as TEXT on pumice is 2.57 — it fails even the large-text
       threshold. Ember is a SURFACE colour. For ember-coloured type
       use --color-ember-ink (4.65), which is the darkened cut.
     - White on ember is 3.34: large display figures only. DESIGN.md
       specifies white at 14–16px on its stat card; that fails, so
       small text on ember is --color-accent-ink instead.
   ============================================================ */

:root {
  color-scheme: light;

  /* ---- TYPE -------------------------------------------------
     One family, as the reference does. Weight 500 for every
     heading and oversized figure, 400 for body and UI. No bold,
     no light — the uniform medium is the whole character.
     Arial is the declared UI fallback at 14px per the brief. */
  --font-sans: "Inter", "Helvetica Neue", Arial, sans-serif;
  --font-ui: Arial, system-ui, -apple-system, sans-serif;

  --weight-regular: 400;
  --weight-medium: 500;

  /* Sizes are the brief's ladder: 10 · 12 · 13 · 14 · 16 · 20 · 24
     · 36 · 61 · 86 · 96 · 295. Fluid between 360px and 1440px. */
  --text-micro:   0.625rem;                                     /* 10 */
  --text-label:   0.75rem;                                      /* 12 */
  --text-caption: 0.8125rem;                                    /* 13 */
  --text-ui:      0.875rem;                                     /* 14 */
  --text-body:    1rem;                                         /* 16 */
  --text-body-lg: clamp(1.0625rem, 1.010rem + 0.23vw, 1.25rem); /* 17 → 20 */
  --text-lead:    clamp(1.25rem,   1.111rem + 0.62vw, 1.5rem);  /* 20 → 24 */
  --text-h3:      clamp(1.5rem,    1.153rem + 1.54vw, 2.25rem); /* 24 → 36 */
  --text-h2:      clamp(2.125rem,  1.184rem + 4.18vw, 3.8125rem);/* 34 → 61 */
  --text-h1:      clamp(2.5rem,    1.157rem + 5.97vw, 5.375rem); /* 40 → 86 */
  --text-mega:    clamp(2.75rem,   1.157rem + 7.08vw, 6rem);     /* 44 → 96 */
  /* The reference's oversized kinetic type is 260px on a full-bleed line.
     Here it sets the two netting figures, which sit two-up in half-width
     panels, so it tops out at 176px — 295px would fit about eight
     characters at this container width and would overflow the panel. */
  --text-kinetic: clamp(4.5rem, 1.708rem + 12.4vw, 11rem);      /* 72 → 176 */

  /* Negative tracking on display sizes, positive on uppercase labels.
     Both taken from the brief and confirmed on the reference. */
  --track-kinetic: -0.0134em;
  --track-h1: -0.046em;
  --track-h2: -0.04em;
  --track-h3: -0.028em;
  --track-lead: -0.02em;
  --track-body: -0.011em;
  --track-label-lg: 0.08em;   /* uppercase at 20px */
  --track-label: 0.12em;      /* uppercase at 12px */
  --track-label-sm: 0.15em;   /* uppercase at 10px */

  --leading-flat: 1.0;
  --leading-tight: 1.1;
  --leading-snug: 1.3;
  --leading-body: 1.5;
  --leading-relaxed: 1.6;

  --measure: 62ch;

  /* ---- COLOR ------------------------------------------------
     Warm light. The ladder climbs toward white: pumice canvas,
     limestone card, chalk raised. Figure/ground is carried by
     these three values alone — there are no shadows and no solid
     borders to fall back on. */
  --color-canvas: #e2e2df;   /* Pumice    */
  --color-surface: #f7f6f2;  /* Limestone */
  --color-raised: #ffffff;   /* Chalk     */

  /* Obsidian is a warm near-black, not the cool one it replaces. */
  --color-ink: #070607;
  --color-ink-muted: #494744;  /* 7.05 on canvas */
  --color-ink-dim: #66635f;    /* 4.58 on canvas — still body-safe */

  /* Rules are DOTTED at 1.5px. That is a signature of the reference,
     confirmed on the live page, not a generic hairline. */
  --color-line: rgba(7, 6, 7, 0.12);
  --color-line-soft: rgba(7, 6, 7, 0.07);
  --color-line-strong: #070607;
  /* Full-strength obsidian for section dividers, as the reference draws
     them. The soft cut exists because this page has dense tabular content
     the reference does not: fourteen list rows at full obsidian would read
     as a grid of noise. */
  /* Dotted is now RESERVED for the full-bleed separators between page
     sections — the only place it still appears. Everything inside a
     section (list rows, card rows, table rows, panel edges) uses the
     solid rules below. */
  --rule-dotted: 1.5px dotted var(--color-line-strong);
  --rule-dotted-soft: 1.5px dotted rgba(7, 6, 7, 0.28);

  /* Solid replacements. The alphas are matched for PERCEIVED weight, not
     copied across: a 1.5px dotted rule at 0.28 is ink about half the time,
     so its average is ~0.14 over 1.5px. A 1px solid at 0.16 lands in the
     same place; carrying 0.28 straight over would have doubled every
     hairline on the page. */
  --rule-solid: 1px solid rgba(7, 6, 7, 0.16);
  --rule-solid-strong: 1px solid rgba(7, 6, 7, 0.32);

  /* Opaque now. The v2 stack was white at 3.5/6/10% over a dark
     canvas; that construction inverts to mud on a light ground, so
     these are real values climbing toward chalk. */
  --fill-1: #edece8;
  --fill-2: #f7f6f2;
  --fill-3: #ffffff;

  /* ---- BRAND TONES ------------------------------------------
     Three, and no more. Ember and violet are used sparingly by
     instruction; sulfur is a background wash only — as type on a
     light ground a pale yellow is illegible. */
  --color-ember: #fc5000;
  --color-ember-hover: #eb4a00;  /* the reference's own hover token */
  --color-ember-ink: #b33800;    /* 4.65 on canvas — ember AS TEXT */
  --color-violet: #524ae9;
  --color-sulfur: #f5f28e;
  --color-chalk: #ffffff;

  /* The primary action: ember fill, obsidian label at 6.06. */
  --color-accent: #fc5000;
  --color-accent-ink: #070607;

  /* ---- STATE ------------------------------------------------
     Re-expressed in the three tones by decision, replacing the four
     free-standing metric hues. The cost is real and worth stating:
     three tones plus neutral must carry four unit states, so state
     is ALWAYS paired with a text label and a fill/stroke difference
     — colour alone no longer separates them.
     Sulfur appears only as a fill behind obsidian, never as a stroke
     or a figure colour. */
  --metric-pos: #524ae9;            /* settled / net      — violet   */
  --metric-neg: var(--color-ember-ink); /* outstanding    — ember ink */
  --metric-info: #494744;           /* informational      — neutral  */
  --metric-warn: #6f6210;           /* attention          — sulfur ink */
  --metric-warn-fill: #f5f28e;      /* the sulfur wash itself         */

  /* ---- SPACE ------------------------------------------------ */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;
  --space-11: 192px;

  --container: 1280px;
  --gutter: var(--space-5);
  --section-y: var(--space-9);

  /* ---- SHAPE ------------------------------------------------
     The reference's triple-radius system. The names are unchanged
     from v2 so every existing use site inherits the new geometry
     without being touched — only the values move.
     DESIGN.md specifies 40px for cards; the live page leans on 24
     and 32 more often, so those stay available for nested and
     dense elements where 40 would swallow the content. */
  --radius-sm: 16px;
  --radius-md: 20px;
  --radius-nested: 24px;
  --radius-lg: 40px;     /* cards, content blocks, rectangular buttons */
  --radius-input: 100px;
  --radius-full: 800px;  /* pills: buttons, tags, nav containers */

  --card-pad: 40px;

  /* ---- MOTION -----------------------------------------------
     Timings measured off the reference: 0.2s on colour swaps,
     0.3s on transforms, and a 0.1s cubic-bezier(0.44,0,0.56,1) on
     the fastest text colour changes. The entrance distances are
     the reference's own: blocks rise 24–32px, a text line rises by
     its own height inside a mask, and the nav alone comes DOWN. */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-snap: cubic-bezier(0.44, 0, 0.56, 1);
  --dur-instant: 100ms;
  --dur-fast: 200ms;
  --dur-base: 300ms;
  --dur-slow: 700ms;

  --rise-sm: 24px;
  --rise-md: 30px;
  --rise-lg: 32px;
  --rise-nav: -32px;
  --stagger: 60ms;
}

@media (min-width: 1024px) {
  :root {
    --gutter: var(--space-8);
    --section-y: var(--space-10);
  }
}