/* ============================================================
   tokens.css — Design System Tokens
   Golden Ratio System (φ = 1.618)
============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;500;600;700;800&family=JetBrains+Mono:wght@300;400;500&family=Crimson+Pro:ital,wght@0,300;0,400;1,300&display=swap');

:root {
  /* ── Golden Ratio ───────────────────────────── */
  --phi:     1.618;
  --phi-inv: 0.618;

  /* ── Color Palette ──────────────────────────── */
  --space-black:   #050810;
  --deep-navy:     #080d1a;
  --deep-blue:     #0a1628;
  --cosmic-purple: #1a0a3d;
  --purple-glow:   #4a1fa8;
  --solar-gold:    #f4b400;
  --gold-bright:   #ffd040;
  --gold-dim:      #8a6800;
  --stellar-white: #e8eef8;
  --cool-grey:     #8896b0;
  --dim-grey:      #3a4560;
  --accent-cyan:   #00d4ff;
  --accent-teal:   #00a896;
  --danger-red:    #ff3b6e;

  /* ── Typography Scale (φ from 16px base) ───── */
  --text-xs:   0.618rem;   /*  ~9.9px */
  --text-sm:   0.764rem;   /* ~12.2px */
  --text-base: 1rem;       /*   16px  */
  --text-md:   1.236rem;   /* ~19.8px */
  --text-lg:   1.618rem;   /* ~25.9px */
  --text-xl:   2.618rem;   /* ~41.9px */
  --text-2xl:  4.236rem;   /* ~67.8px */
  --text-3xl:  6.854rem;   /*~109.7px */

  /* ── Spacing Scale (φ) ──────────────────────── */
  --space-1: 0.382rem;
  --space-2: 0.618rem;
  --space-3: 1rem;
  --space-4: 1.618rem;
  --space-5: 2.618rem;
  --space-6: 4.236rem;
  --space-7: 6.854rem;
  --space-8: 11.09rem;

  /* ── Easing Curves ──────────────────────────── */
  --ease-spring:   cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --ease-silk:     cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-dramatic: cubic-bezier(0.77, 0, 0.175, 1);
}