/* ============================================================
   FORMULAGENIE — DESIGN TOKENS
   Production CSS — tokens.css
   ============================================================ */

:root {
  /* ── Colour Palette ───────────────────────────────────── */
  --bg-base:        #06090f;
  --bg-surface:     #090e19;
  --bg-elevated:    #0d1525;
  --bg-overlay:     #111e33;
  --bg-hover:       #162236;

  --border-subtle:  #162236;
  --border-default: #1d2f48;
  --border-strong:  #254060;
  --border-focus:   #1a6cf0;

  --blue-600:       #1a6cf0;
  --blue-500:       #3d85f5;
  --blue-400:       #6ba3f8;
  --blue-200:       rgba(26,108,240,0.15);
  --blue-100:       rgba(26,108,240,0.08);

  --teal-500:       #00c8a4;
  --teal-400:       #2dd4bb;
  --teal-200:       rgba(0,200,164,0.13);
  --teal-100:       rgba(0,200,164,0.07);

  --amber-500:      #f59e0b;
  --amber-200:      rgba(245,158,11,0.15);
  --amber-100:      rgba(245,158,11,0.07);

  --red-500:        #ef4444;
  --red-200:        rgba(239,68,68,0.15);
  --red-100:        rgba(239,68,68,0.07);

  --violet-500:     #7c5cfc;
  --violet-200:     rgba(124,92,252,0.15);
  --violet-100:     rgba(124,92,252,0.07);

  --text-primary:   #e4edf8;
  --text-secondary: #7d9ab8;
  --text-tertiary:  #3d5a7a;
  --text-code:      #5cb8ff;

  /* ── Typography ───────────────────────────────────────── */
  --font-display:   'Syne', sans-serif;
  --font-body:      'DM Sans', sans-serif;
  --font-mono:      'JetBrains Mono', monospace;

  --text-xs:    11px;
  --text-sm:    13px;
  --text-base:  15px;
  --text-md:    16px;
  --text-lg:    18px;
  --text-xl:    22px;
  --text-2xl:   28px;
  --text-3xl:   36px;
  --text-4xl:   48px;
  --text-5xl:   60px;

  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-extrabold:800;

  --leading-tight:   1.1;
  --leading-snug:    1.3;
  --leading-normal:  1.6;
  --leading-relaxed: 1.75;

  --tracking-tight:  -0.04em;
  --tracking-snug:   -0.02em;
  --tracking-normal:  0;
  --tracking-wide:    0.04em;
  --tracking-wider:   0.08em;
  --tracking-widest:  0.12em;

  /* ── Spacing Scale ────────────────────────────────────── */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-7:   28px;
  --space-8:   32px;
  --space-9:   36px;
  --space-10:  40px;
  --space-12:  48px;
  --space-14:  56px;
  --space-16:  64px;
  --space-20:  80px;
  --space-24:  96px;

  /* ── Radii ────────────────────────────────────────────── */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   14px;
  --radius-xl:   18px;
  --radius-2xl:  24px;
  --radius-full: 9999px;

  /* ── Shadows ──────────────────────────────────────────── */
  --shadow-sm:   0 1px 3px rgba(0,0,0,0.4), 0 1px 2px rgba(0,0,0,0.3);
  --shadow-md:   0 4px 16px rgba(0,0,0,0.5), 0 2px 6px rgba(0,0,0,0.3);
  --shadow-lg:   0 8px 32px rgba(0,0,0,0.6), 0 4px 12px rgba(0,0,0,0.3);
  --shadow-blue: 0 4px 24px rgba(26,108,240,0.25);
  --shadow-glow: 0 0 40px rgba(26,108,240,0.12);

  /* ── Transitions ──────────────────────────────────────── */
  --ease-fast:   all 0.12s ease;
  --ease-std:    all 0.18s ease;
  --ease-slow:   all 0.28s ease;

  /* ── Z-index ──────────────────────────────────────────── */
  --z-base:    1;
  --z-raised:  10;
  --z-overlay: 100;
  --z-modal:   200;
  --z-nav:     300;
  --z-toast:   400;

  /* ── Layout ───────────────────────────────────────────── */
  --container-max: 1040px;
  --nav-height:    60px;
}