/* ================================================================
   tokens.css — Design System Tokens
   All colors, spacing, typography, and other design values.
   Never hardcode values outside this file.
================================================================ */

:root {
  /* ── Colors ──────────────────────────────────────────────── */
  --color-bg:        #ffffff;
  --color-text:      #111111;
  --color-muted:     #555555;
  --color-subtle:    #e8e8e8;
  --color-faint:     #f4f4f4;
  --color-white:     #ffffff;

  /* Rainbow palette */
  --c1: #FF6B6B;
  --c2: #FFD93D;
  --c3: #6BCB77;
  --c4: #4ECDC4;
  --c5: #A78BFA;
  --c6: #F472B6;

  /* Gradients */
  --rainbow: linear-gradient(
    135deg,
    var(--c1), var(--c2), var(--c3),
    var(--c4), var(--c5), var(--c6), var(--c1)
  );

  /* ── Typography ──────────────────────────────────────────── */
  --font-display: 'Space Grotesk', sans-serif;
  --font-body:    'Inter', sans-serif;
  --font-mono:    'JetBrains Mono', monospace;

  /* Fluid type scale via clamp(min, preferred, max) */
  --text-xs:   clamp(0.65rem,  1vw,   0.75rem);
  --text-sm:   clamp(0.8rem,   1.2vw, 0.875rem);
  --text-base: clamp(0.9rem,   1.5vw, 1rem);
  --text-lg:   clamp(1rem,     1.8vw, 1.125rem);
  --text-xl:   clamp(1.1rem,   2vw,   1.25rem);
  --text-2xl:  clamp(1.3rem,   2.5vw, 1.5rem);
  --text-3xl:  clamp(1.6rem,   3vw,   2rem);
  --text-4xl:  clamp(2rem,     4vw,   3rem);
  --text-hero: clamp(3rem,     9vw,   8rem);

  /* ── Spacing (8px base) ──────────────────────────────────── */
  --space-1:   8px;
  --space-2:  16px;
  --space-3:  24px;
  --space-4:  32px;
  --space-5:  40px;
  --space-6:  48px;
  --space-7:  64px;
  --space-8:  80px;
  --space-9:  96px;
  --space-10: 128px;

  /* ── Misc ────────────────────────────────────────────────── */
  --radius:      4px;
  --radius-lg:   12px;
  --transition:  0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --nav-h:       64px;
  --shadow-sm:   0 2px 8px rgba(0,0,0,0.06);
  --shadow-md:   0 8px 24px rgba(0,0,0,0.10);
  --shadow-lg:   0 16px 48px rgba(0,0,0,0.15);
}