/* tokens.css — Design System Tokens */
:root {
  /* Colors */
  --bg: #0a0a0a;
  --surface: #141414;
  --surface-2: #1c1c1c;
  --border: #2a2a2a;
  --text: #f0f0f0;
  --text-2: #a0a0a0;
  --text-muted: #666666;
  --accent: #2563eb;
  --accent-soft: rgba(37, 99, 235, 0.08);
  --teal: #0d9488;
  --teal-soft: rgba(13, 148, 136, 0.09);
  --warm: #c2410c;
  --warm-soft: rgba(194, 65, 12, 0.07);
  --green: #16a34a;
  --amber: #d97706;
  --red: #dc2626;
  --pro: #7c3aed;
  --pro-soft: rgba(124, 58, 237, 0.08);

  /* Typography — base 16px, 1.2 scale */
  --font: 'Inter', sans-serif;
  --mono: 'IBM Plex Mono', monospace;
  --ts-xs: 11px;
  --ts-sm: 13px;
  --ts-base: 15px;
  --ts-md: 17px;
  --ts-lg: 20px;
  --ts-xl: 26px;
  --ts-2xl: 32px;
  --ts-3xl: 38px;
  --ts-hero: clamp(32px, 4.2vw, 50px);

  /* Spacing */
  --sp-xs: 4px;
  --sp-sm: 8px;
  --sp-md: 12px;
  --sp-lg: 16px;
  --sp-xl: 24px;
  --sp-2xl: 32px;
  --sp-section: 32px 28px;

  /* Radii */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-pill: 20px;
  --r-phone: 30px;

  /* Shadows */
  --sh-sm: 0 2px 12px rgba(0, 0, 0, 0.4);
  --sh-md: 0 6px 18px rgba(0, 0, 0, 0.5);
  --sh-lg: 0 20px 50px rgba(0, 0, 0, 0.7);
  --sh-pop: 0 8px 24px rgba(0, 0, 0, 0.6);
}