/* =============================================
   TOKENS — Design System for Alexander Portfolio
   OKLCH color system, type scale, z-index, spacing
   ============================================= */

/* ─── Color Palette ─────────────────────────── */
:root {
  /* Backgrounds */
  --bg:           oklch(0.08 0.000 0);
  --surface:      oklch(0.12 0.005 250);
  --surface-2:    oklch(0.16 0.008 250);
  --surface-3:    oklch(0.20 0.010 250);

  /* Brand */
  --primary:      oklch(0.65 0.14 265);
  --primary-dim:  oklch(0.50 0.10 265);
  --accent:       oklch(0.72 0.16 200);
  --accent-dim:   oklch(0.55 0.12 200);
  --violet:       oklch(0.62 0.13 295);

  /* Text */
  --ink:          oklch(0.95 0.003 240);
  --ink-2:        oklch(0.75 0.008 240);
  --muted:        oklch(0.52 0.010 240);
  --subtle:       oklch(0.30 0.008 240);

  /* Borders */
  --border:       oklch(0.20 0.010 250);
  --border-hover: oklch(0.30 0.015 260);

  /* Glows */
  --glow-primary: oklch(0.65 0.14 265 / 0.18);
  --glow-accent:  oklch(0.72 0.16 200 / 0.15);
  --glow-violet:  oklch(0.62 0.13 295 / 0.15);
}

/* ─── Typography ────────────────────────────── */
:root {
  --font-sans: 'Bricolage Grotesque', 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;

  /* Type Scale — fluid clamp */
  --text-xs:   clamp(0.70rem, 1vw,  0.75rem);
  --text-sm:   clamp(0.85rem, 1.5vw, 0.9rem);
  --text-base: clamp(1rem,    1.5vw, 1rem);
  --text-lg:   clamp(1.1rem,  2vw,   1.2rem);
  --text-xl:   clamp(1.25rem, 2.5vw, 1.5rem);
  --text-2xl:  clamp(1.5rem,  3vw,   2rem);
  --text-3xl:  clamp(2rem,    4vw,   2.75rem);
  --text-4xl:  clamp(2.5rem,  5vw,   3.5rem);
  --text-hero: clamp(3rem,    7vw,   5.5rem);

  --leading-tight:  1.2;
  --leading-snug:   1.35;
  --leading-normal: 1.6;
  --leading-loose:  1.75;

  --tracking-tight:   -0.02em;
  --tracking-display: -0.02em; /* floor is -0.04em per impeccable rules */
  --tracking-normal:  0em;
  --tracking-wide:    0.04em;
  --tracking-widest:  0.08em;
}

/* ─── Spacing ───────────────────────────────── */
:root {
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;
  --space-40: 10rem;

  --section-gap: clamp(5rem, 10vw, 9rem);
  --container:   min(1200px, 100% - 3rem);
}

/* ─── Borders & Radius ──────────────────────── */
:root {
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;    /* card max — impeccable rule: no 32px+ */
  --radius-xl: 20px;    /* nav pill only */
  --radius-full: 9999px; /* tags/badges only */
}

/* ─── Z-Index Scale (kaizen standardized) ───── */
:root {
  --z-base:     0;
  --z-card:    10;
  --z-sticky:  20;
  --z-dropdown:30;
  --z-modal-bg:40;
  --z-modal:   50;
  --z-toast:   60;
  --z-tooltip: 70;
}

/* ─── Transitions ───────────────────────────── */
:root {
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-out-expo:  cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast:  150ms;
  --duration-base:  250ms;
  --duration-slow:  400ms;
  --duration-enter: 600ms;
}