/* ════════════════════════════════════════════════════════════════════
   VYAN — Design Tokens
   The Visual Brand System, compiled. (Codex Ch. 15)
   Raw hex anywhere else is a defect. Obsidian & Platinum carry 90%
   of every surface; Ember appears only where money or trust moves.
   ════════════════════════════════════════════════════════════════════ */
:root {
  /* ── Color · ground ── */
  --obsidian:   #0A0A0B;
  --graphite:   #1A1A1E;
  --graphite-2: #131316;
  --line:       #232329;          /* structural hairline */
  --line-hi:    #34343C;          /* hovered / emphasized hairline */
  --hairline:   rgba(232,232,236,.07);

  /* ── Color · type ── */
  --platinum:   #E8E8EC;
  --plat-dim:   #A8A8B4;
  --plat-faint: #70707C;
  --ghost:      #131315;          /* ghost brand marks, barely above ground */

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

  /* ── Color · functional states (never decorative) ── */
  --green:      #3DD68C;
  --amber:      #F5B83D;
  --red:        #E5484D;
  --trust:      #4D7CFE;

  /* ── 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%);

  /* ── 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 · precise, not bubbly ── */
  --r-card:    8px;
  --r-control: 6px;
  --r-chip:    4px;
  --r-pill:    999px;

  /* ── Motion (the ember pulse duration is a token, not a magic number) ── */
  --m-fast:  150ms;
  --m-base:  200ms;
  --m-pulse: 250ms;
  --m-enter: 420ms;
  --ease:    cubic-bezier(.4, 0, .2, 1);
  --ease-spring: cubic-bezier(.34, 1.45, .64, 1);   /* the press-and-release feel */
  --ease-exit:   cubic-bezier(.16, 1, .3, 1);        /* expo-out: things settle like hardware */

  /* ── Surfaces that aren't pure tokens elsewhere ── */
  --tint-hover: rgba(232,232,236,.03);
  --tint-row:   rgba(232,232,236,.018);
  --scrim:      rgba(10,10,11,.62);
  --header-bg:  rgba(10,10,11,.88);

  /* ── Elevation · light comes from meaning, not gloss ── */
  --glow-ember:  0 0 24px rgba(201,162,63,.45);

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

/* ════════════════════════════════════════════════════════════════════
   LIGHT MODE · bright-sun field mode (Doctrine §5.1: auto by system)
   The same instrument in daylight: paper ground, ink type, the ember
   discipline unchanged. Every surface flips because every surface
   speaks in tokens.
   ════════════════════════════════════════════════════════════════════ */
@media (prefers-color-scheme: light) {
  :root {
    --obsidian:   #F6F6F8;          /* the ground becomes paper */
    --graphite:   #ECECEF;
    --graphite-2: #FFFFFF;          /* panels lift to white */
    --line:       #E0E0E6;
    --line-hi:    #C9C9D2;
    --hairline:   rgba(22,22,26,.08);

    --platinum:   #16161A;          /* type becomes ink */
    --plat-dim:   #4E4E5A;
    --plat-faint: #6A6A74;          /* WCAG AA on white for small mono labels */
    --ghost:      #ECECEF;

    --ember:      #8A6A18;          /* deeper gold; AA as text on paper and white */
    --ember-hi:   #C9A23F;
    --ember-deep: #8F6F22;
    --ember-ink:  #1A1503;

    --green:      #157A4B;          /* AA on white */
    --amber:      #946400;          /* AA on white */
    --red:        #C32026;          /* AA on white */
    --trust:      #2F5FE0;

    --grad-ember: linear-gradient(90deg, #D9B453, #A87F1F);
    --grad-ember-deep: linear-gradient(135deg, #E2C25F 0%, #C9A23F 45%, #8F6F22 100%);
    --grad-plat:  linear-gradient(135deg, #2A2A32 0%, #4E4E5A 55%, #6E6E7A 100%);

    --glow-ember: 0 0 24px rgba(168,127,31,.35);
    --tint-hover: rgba(22,22,26,.04);
    --tint-row:   rgba(22,22,26,.025);
    --scrim:      rgba(246,246,248,.66);
    --header-bg:  rgba(246,246,248,.88);
  }
}