/* ════════════════════════════════════════════════════════════════════
   VYAN - Design Tokens · "Vyan Evolved" (Codex Ch. 15, rev. 2026-06)
   The Visual Brand System, compiled. Raw hex lives ONLY here (the system
   of record); everywhere else a raw hex is a defect. Obsidian & Platinum
   carry 90% of every surface; Ember appears only where money or trust
   moves. EVOLVED: the ground warms a few degrees toward graphite-brown,
   corners round onto one disciplined scale, and a real layered elevation
   ladder makes the instrument read as tangible, liftable hardware. Dark is
   primary; the same instrument flips to warm paper in daylight. Every value
   stays a token so every surface evolves at once.
   ════════════════════════════════════════════════════════════════════ */
:root {
  /* ── Color · ground + surfaces (warmed toward graphite-brown) ── */
  --obsidian:   #0E0C09;          /* app ground, warm graphite-brown */
  --graphite:   #1C1A15;          /* primary card / surface */
  --graphite-2: #16140F;          /* recessed / secondary surface */
  --graphite-3: #221F18;          /* raised / hover surface, one step brighter */
  --line:       #2A2720;          /* structural hairline (object edge) */
  --line-hi:    #3A362C;          /* hovered / emphasized hairline */
  --hairline:   rgba(236,232,222,.07);

  /* ── Color · type ── */
  --platinum:   #E8E8EC;
  --plat-dim:   #A8A8B4;
  --plat-faint: #86848D;          /* lightened: now AA small text on cards (4.72:1) */
  --ghost:      #16140F;          /* ghost brand marks, barely above ground */

  /* ── Color · the earned accent ── */
  --ember:      #C9A23F;
  --ember-hi:   #E8C97A;
  --ember-deep: #8F6F22;
  --ember-ink:  #161204;          /* dark ink on gold */

  /* ── Color · functional states (never decorative) ── */
  --green:      #3DD68C;
  --amber:      #F5B83D;
  --red:        #E5484D;
  --trust:      #4D7CFE;
  /* AA-verified ink for DARK INK ON A SATURATED FILL (verdict pills, meters) */
  --green-ink:  #0B3322;          /* on --green fill (7.41:1) */
  --amber-ink:  #4A2A02;          /* on --amber fill (7.27:1) */
  --red-ink:    #200406;          /* on --red fill (4.96:1); white fails (3.91) */
  --trust-ink:  #040D24;          /* on --trust fill (5.17:1); white fails (3.73) */
  /* brighter tones for SATURATED COLOR AS TEXT on a tint (low-emphasis chips) */
  --red-text:   #FF6B6F;          /* red text on --tint-red over a card (5.13:1) */
  --trust-text: #7AA0FF;          /* trust text on --tint-trust over a card (5.45:1) */

  /* ── Gradients ── */
  --grad-ember: linear-gradient(90deg, var(--ember-hi), var(--ember));
  --grad-ember-deep: linear-gradient(135deg, #F0DA9A 0%, #E8C97A 45%, #A8842B 100%);
  --grad-plat:  linear-gradient(135deg, #FFFFFF 0%, #C9C9D1 55%, #9A9AA4 100%);

  /* ── Accent tints (color-mix so they auto-track if a hue shifts) ── */
  --tint-ember:   color-mix(in srgb, var(--ember) 12%, transparent);
  --tint-ember-2: color-mix(in srgb, var(--ember) 20%, transparent);
  --tint-active:  color-mix(in srgb, var(--ember) 14%, transparent);   /* nav / chip active */
  --tint-green:   color-mix(in srgb, var(--green) 14%, transparent);
  --tint-amber:   color-mix(in srgb, var(--amber) 14%, transparent);
  --tint-red:     color-mix(in srgb, var(--red) 14%, transparent);
  --tint-trust:   color-mix(in srgb, var(--trust) 14%, transparent);
  --tint-warm:    color-mix(in srgb, var(--ember-hi) 5%, transparent); /* whole-card warm wash */

  /* ── Type ── */
  --disp: 'Michroma', 'Arial Black', sans-serif;
  --body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono: 'IBM Plex Mono', 'SFMono-Regular', 'Courier New', monospace;

  /* ── Radius · evolved rounder, one ascending family (no random bubbles) ── */
  --r-media:   16px;              /* edge-to-edge photo cap on a card */
  --r-card:    16px;              /* cards, sheets, modals (was 8) */
  --r-card-lg: 20px;              /* the mobile Control Deck + big panels */
  --r-control: 12px;              /* buttons, search, inputs, segmented (was 6) */
  --r-inner:   9px;               /* a control nested in a control */
  --r-chip:    9px;               /* chips, verdict pills, tags (was 4) */
  --r-pill:    999px;

  /* ── Spacing scale (whitespace becomes a token decision, 4px base) ── */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 20px; --s-6: 24px; --s-7: 32px; --s-8: 40px;
  --pad-card:  18px;              /* standard internal card padding */
  --pad-panel: 22px;              /* sheet / deck inner padding */

  /* ── Elevation · the "tangible". Layered, warm-black.
        USAGE LAW: one tier per surface, never stack. e1 rest · e2 card/hover ·
        e3 float-only (sheets/deck/modals/picker) · e4 modals/FAB. ── */
  --e0: inset 0 0 0 1px var(--line);
  --e1: 0 1px 1px rgba(0,0,0,.45), 0 2px 6px -2px rgba(0,0,0,.5);
  --e2: 0 1px 1px rgba(0,0,0,.55), 0 8px 20px -6px rgba(0,0,0,.66);
  --e3: 0 2px 2px rgba(0,0,0,.6),  0 18px 40px -10px rgba(0,0,0,.74);
  --e4: 0 4px 6px rgba(0,0,0,.62), 0 30px 64px -16px rgba(0,0,0,.8);
  --e-press: 0 1px 1px rgba(0,0,0,.5), 0 2px 4px -2px rgba(0,0,0,.55);
  --e-inset: inset 0 1px 0 rgba(236,232,222,.05);   /* top-edge light-catch */
  --e-ember: 0 6px 22px -6px color-mix(in srgb, var(--ember) 55%, transparent); /* hot-door ring + FAB only */
  --ring-ember: 0 0 0 3px color-mix(in srgb, var(--ember) 34%, transparent);     /* focus ring */
  --glow-ember: 0 0 24px rgba(201,162,63,.4);        /* softened; hot-door ring only */

  /* ── Motion (adds a tactile press; spring reserved for lift) ── */
  --m-fast:  140ms;
  --m-base:  200ms;
  --m-pulse: 250ms;
  --m-enter: 420ms;
  --m-press: 90ms;                /* the down-state */
  --ease:        cubic-bezier(.4, 0, .2, 1);
  --ease-spring: cubic-bezier(.34, 1.45, .64, 1);   /* press-and-release lift */
  --ease-exit:   cubic-bezier(.16, 1, .3, 1);        /* expo-out: settles like hardware */
  --ease-press:  cubic-bezier(.2, 0, 0, 1);          /* firm, no overshoot */

  /* ── Surfaces that aren't pure tokens elsewhere (warmed) ── */
  --tint-hover: rgba(236,232,222,.04);
  --tint-row:   rgba(236,232,222,.02);
  --scrim:      rgba(8,7,5,.66);
  --header-bg:  rgba(14,12,9,.9);

  /* ── Layout ── */
  --max-w:      1216px;
  --max-w-text: 680px;
  --gutter:     32px;
}

/* ════════════════════════════════════════════════════════════════════
   LIGHT MODE · bright-sun field mode (auto by system)
   The same instrument in daylight: warm paper ground, ink type, the ember
   discipline unchanged. Every surface flips because every surface speaks in
   tokens. All pairs below recomputed to WCAG AA.
   ════════════════════════════════════════════════════════════════════ */
@media (prefers-color-scheme: light) {
  :root {
    --obsidian:   #F2EEE6;          /* the ground becomes warm paper */
    --graphite:   #FFFFFF;          /* cards sit bright above the paper */
    --graphite-2: #F7F3EB;          /* recessed surface */
    --graphite-3: #FBF8F2;          /* hover / raised */
    --ghost:      #F7F3EB;
    --line:       #E2DCCF;
    --line-hi:    #CFC8B8;
    --hairline:   rgba(40,34,22,.08);

    --platinum:   #1E1B14;          /* ink on paper (17.2:1 on white) */
    --plat-dim:   #5A554A;          /* 7.41:1 on white */
    --plat-faint: #676255;          /* AA small text on paper (5.25:1) */
    --ghost:      #F7F3EB;

    --ember:      #8A6A18;          /* money text 5.05:1 on white; CTA fill */
    --ember-hi:   #B98F1E;
    --ember-deep: #8F6F22;
    --ember-ink:  #161204;          /* dark ink on the bright ember-hi stop (6.08:1) */

    --green:      #157A4B;
    --amber:      #946400;
    --red:        #C32026;
    --trust:      #2F5FE0;
    --green-ink:  #FFFFFF; --amber-ink: #FFFFFF; --red-ink: #FFFFFF; --trust-ink: #FFFFFF;
    --red-text:   #C32026; --trust-text: #2F5FE0;

    --grad-ember: linear-gradient(90deg, #A8842B, #8A6A18);  /* white label = 5.05:1 PASS */
    --grad-ember-deep: linear-gradient(135deg, #E2C25F 0%, #C9A23F 45%, #8F6F22 100%);
    --grad-plat:  linear-gradient(135deg, #2A2A32 0%, #4E4E5A 55%, #6E6E7A 100%);

    --tint-ember:   color-mix(in srgb, var(--ember) 13%, transparent);
    --tint-ember-2: color-mix(in srgb, var(--ember) 22%, transparent);
    --tint-active:  color-mix(in srgb, var(--ember) 14%, transparent);
    --tint-green:   color-mix(in srgb, var(--green) 14%, transparent);
    --tint-amber:   color-mix(in srgb, var(--amber) 16%, transparent);
    --tint-red:     color-mix(in srgb, var(--red) 13%, transparent);
    --tint-trust:   color-mix(in srgb, var(--trust) 12%, transparent);
    --tint-warm:    color-mix(in srgb, var(--ember) 5%, transparent);

    --e0: inset 0 0 0 1px var(--line);
    --e1: 0 1px 1px rgba(40,34,22,.06), 0 2px 6px -2px rgba(40,34,22,.1);
    --e2: 0 1px 1px rgba(40,34,22,.07), 0 8px 20px -6px rgba(40,34,22,.14);
    --e3: 0 2px 2px rgba(40,34,22,.08), 0 18px 40px -10px rgba(40,34,22,.18);
    --e4: 0 4px 6px rgba(40,34,22,.1),  0 30px 64px -16px rgba(40,34,22,.22);
    --e-press: 0 1px 1px rgba(40,34,22,.06), 0 2px 4px -2px rgba(40,34,22,.1);
    --e-inset: inset 0 1px 0 rgba(255,255,255,.7);
    --e-ember: 0 6px 22px -6px color-mix(in srgb, var(--ember) 45%, transparent);
    --ring-ember: 0 0 0 3px color-mix(in srgb, var(--ember) 30%, transparent);
    --glow-ember: 0 0 24px rgba(138,106,24,.3);

    --tint-hover: rgba(40,34,22,.04);
    --tint-row:   rgba(40,34,22,.022);
    --scrim:      rgba(40,34,22,.5);   /* dark scrim over photos so light text stays AA */
    --header-bg:  rgba(242,238,230,.9);
  }
}