/* ============================================================
   AXIA — DESIGN TOKENS  (Futuristic Edition)
   60 / 30 / 10  →  Obsidian Black / Platinum-Silver / Champagne Gold
   ============================================================ */

:root {
  /* — Black hierarchy (60%) — */
  --obsidian:        #050505;
  --rich-black:      #08080A;
  --graphite:        #0E0E11;
  --gunmetal:        #15161A;
  --gunmetal-soft:   #1C1D22;

  /* — Platinum / Silver hierarchy (30%) — */
  --platinum:        #D9D9D9;
  --silver-smoke:    #BFC2C7;
  --brushed-steel:   #9EA2A8;
  --ivory-smoke:     #F2F0EB;
  --steel-faint:     #6B6E74;

  /* — Champagne gold accent (10%) — */
  --gold:            #D6A24A;
  --gold-refined:    #C9922E;
  --gold-deep:       #A9781F;
  --gold-pale:       #EBC17D;
  --gold-ivory:      #EEDCC3;

  /* — Semantic surfaces (dark, primary) — */
  --bg:              var(--obsidian);
  --bg-elevated:     var(--rich-black);
  --surface:         var(--graphite);
  --surface-2:       var(--gunmetal);
  --border:          rgba(214,162,74,0.10);
  --border-strong:   rgba(214,162,74,0.22);
  --divider:         rgba(217,217,217,0.06);
  --hairline:        rgba(217,217,217,0.10);

  /* — Type — */
  --text:            #EDEBE5;
  --text-muted:      rgba(237,235,229,0.66);
  --text-faint:      rgba(237,235,229,0.40);
  --text-gold:       var(--gold);

  /* — Shadows — */
  --shadow-1: 0 1px 0 rgba(255,255,255,0.04) inset, 0 12px 40px rgba(0,0,0,0.5);
  --shadow-2: 0 1px 0 rgba(255,255,255,0.06) inset, 0 30px 80px rgba(0,0,0,0.7);
  --shadow-gold: 0 0 0 1px rgba(214,162,74,0.35), 0 18px 50px rgba(169,120,31,0.25);

  /* — Gradients — */
  --grad-gold: linear-gradient(135deg, #EBC17D 0%, #DFB77C 18%, #C08329 60%, #EABE81 87%, #EEDCC3 100%);
  --grad-platinum: linear-gradient(135deg, #F2F0EB 0%, #D9D9D9 40%, #9EA2A8 100%);
  --grad-obsidian: linear-gradient(180deg, #08080A 0%, #050505 100%);
  --grad-veil-top: linear-gradient(180deg, rgba(5,5,5,0.85) 0%, rgba(5,5,5,0.55) 35%, rgba(5,5,5,0.0) 60%, rgba(5,5,5,0.55) 90%, rgba(5,5,5,0.92) 100%);
  --grad-veil-bottom: linear-gradient(180deg, rgba(5,5,5,0.0) 0%, rgba(5,5,5,0.55) 60%, rgba(5,5,5,0.95) 100%);
  --grad-section-edge: linear-gradient(90deg, rgba(214,162,74,0) 0%, rgba(214,162,74,0.55) 50%, rgba(214,162,74,0) 100%);

  /* Section-to-section flow bridges (top fade, bottom fade) */
  --flow-top:    linear-gradient(180deg, rgba(5,5,5,1) 0%, rgba(5,5,5,0) 100%);
  --flow-bottom: linear-gradient(180deg, rgba(5,5,5,0) 0%, rgba(5,5,5,1) 100%);

  /* — Type system — FUTURISTIC */
  --font-display: "Chakra Petch", "Space Grotesk", "Inter Tight", sans-serif;
  --font-sans:    "Space Grotesk", "Inter Tight", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --tracking-eyebrow: 0.38em;
  --tracking-tight:   -0.02em;
  --tracking-display: -0.025em;
  --tracking-wide:    0.08em;

  /* — Geometry — */
  --radius-xs: 1px;
  --radius-sm: 2px;
  --radius-md: 4px;

  /* — Spacing scale — */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;
  --s-9: 96px; --s-10: 128px; --s-11: 160px; --s-12: 200px;

  /* — Layout — */
  --gutter: clamp(20px, 4vw, 56px);
  --container: 1440px;

  /* — Motion — */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-1: 320ms;
  --dur-2: 520ms;
  --dur-3: 900ms;
  --dur-4: 1400ms;
}

/* — Light mode (premium alternate) — */
[data-theme="light"] {
  --bg:            var(--ivory-smoke);
  --bg-elevated:   #FAF8F2;
  --surface:       #ECE9E0;
  --surface-2:     #E1DDD2;
  --border:        rgba(11,11,13,0.10);
  --border-strong: rgba(169,120,31,0.32);
  --divider:       rgba(11,11,13,0.08);
  --hairline:      rgba(11,11,13,0.10);

  --text:          #0B0B0D;
  --text-muted:    rgba(11,11,13,0.66);
  --text-faint:    rgba(11,11,13,0.40);
  --text-gold:     var(--gold-deep);

  --shadow-1: 0 1px 0 rgba(255,255,255,0.6) inset, 0 12px 32px rgba(11,11,13,0.10);
  --shadow-2: 0 1px 0 rgba(255,255,255,0.6) inset, 0 24px 60px rgba(11,11,13,0.14);

  --grad-obsidian: linear-gradient(180deg, #FAF8F2 0%, #F2F0EB 100%);
  --flow-top:    linear-gradient(180deg, rgba(242,240,235,1) 0%, rgba(242,240,235,0) 100%);
  --flow-bottom: linear-gradient(180deg, rgba(242,240,235,0) 0%, rgba(242,240,235,1) 100%);
}