/**
 * Theme tokens.
 * fontFamily: sans / mono / helvetica · colors: off-black, apple-gray
 * · fontSize: giant (6rem / lh 1), mega (11rem / lh 0.9) · letterSpacing.tighter
 */
:root {
  /* Colors */
  --color-off-black: #111111;
  --color-white: hsl(0 0% 100%);
  --color-gray-50: hsl(210 20% 98%);
  --color-gray-100: hsl(220 14% 96%);
  --color-gray-200: hsl(220 13% 91%);
  --color-gray-300: hsl(216 12% 84%);
  --color-gray-400: hsl(218 11% 65%);
  --color-gray-500: hsl(220 9% 46%);
  --color-gray-600: hsl(215 14% 34%);
  --color-gray-800: hsl(217 19% 17%);
  --color-apple-gray: #86868b;
  --color-accent-gold: hsl(41 100% 75%);
  --color-accent-purple: hsl(277 22% 64%);
  --color-accent-blue: hsl(221 100% 75%);
  --color-accent-green: hsl(84 67% 73%);

  /* Typography */
  --font-sans: 'Inter', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --font-helvetica: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-lg: 1.125rem;
  --fs-xl: 1.25rem;
  --fs-2xl: 1.5rem;
  --fs-3xl: 1.875rem;
  --fs-4xl: 2.25rem;
  --fs-5xl: 3rem;
  --fs-6xl: 3.75rem;
  --fs-8xl: 6rem;
  --fs-giant: 6rem;
  --fs-mega: 11rem;
  --lh-giant: 1;
  --lh-mega: 0.9;

  /* Spacing scale */
  --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;

  /* Radii */
  --radius-sm: 0.25rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;
  --radius-xl: 0.75rem;
  --radius-2xl: 1rem;
  --radius-3xl: 1.5rem;
  --radius-full: 9999px;

  /* Transitions */
  --transition-colors: color 200ms, background-color 200ms, border-color 200ms;
  --transition-opacity: opacity 200ms;
  --transition-transform: transform 200ms;
  --transition-all: all 200ms;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.05);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);

  /* Letter spacing */
  --tracking-tighter: -0.04em;
  --tracking-tight: -0.025em;
  --tracking-wide: 0.025em;
  --tracking-widest: 0.1em;

  /* Examples page aliases (shared palette) */
  --bg-primary: var(--color-off-black);
  --bg-secondary: hsl(0 0% 3.92%);
  --bg-tertiary: hsl(0 0% 10.2%);
  --border-color: hsl(0 0% 20%);
  --text-primary: hsl(0 0% 89.8%);
  --text-secondary: hsl(0 0% 60%);
  --text-muted: hsl(0 0% 40%);
  --accent-gold: hsl(41 100% 75.5%);
  --accent-purple: hsl(277 22% 64%);
  --accent-blue: hsl(221 100% 75.5%);
  --accent-green: hsl(84 67% 73%);
}