/* ════════════════════════════════════════════════════════════════════
   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:   #9C9CA6;
  --plat-faint: #5C5C66;
  --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;
  --ease:    cubic-bezier(.4, 0, .2, 1);

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