@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300..700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap");

:root {
  /* Base neutrals — warm-black ground */
  --black: oklch(0.15 0.006 40);
  --gray-900: oklch(0.19 0.006 40);
  --gray-800: oklch(0.24 0.007 40);
  --gray-700: oklch(0.32 0.008 40);
  --gray-600: oklch(0.44 0.008 40);
  --gray-500: oklch(0.56 0.008 40);
  --gray-400: oklch(0.68 0.007 40);
  --gray-300: oklch(0.80 0.006 40);
  --gray-200: oklch(0.88 0.005 40);
  --gray-100: oklch(0.94 0.004 40);
  --white: oklch(0.985 0.003 40);

  /* Brand gradient: orange > red > magenta > purple > blue > cyan */
  --grad-orange: oklch(0.78 0.16 65);
  --grad-red: oklch(0.58 0.20 25);
  --grad-magenta: oklch(0.66 0.21 350);
  --grad-purple: oklch(0.48 0.20 300);
  --grad-blue: oklch(0.55 0.19 260);
  --grad-cyan: oklch(0.75 0.14 205);

  --gradient-brand: linear-gradient(115deg,
    var(--grad-orange) 0%,
    var(--grad-red) 22%,
    var(--grad-magenta) 42%,
    var(--grad-purple) 58%,
    var(--grad-blue) 78%,
    var(--grad-cyan) 100%);

  --accent: oklch(0.62 0.18 255);
  --accent-hover: oklch(0.68 0.18 255);
  --accent-active: oklch(0.56 0.18 255);
  --accent-fg: oklch(0.98 0.005 255);

  --bg-page: var(--black);
  --bg-surface: var(--gray-900);
  --bg-surface-raised: var(--gray-800);
  --bg-inset: oklch(0.12 0.006 40);
  --border-subtle: var(--gray-800);
  --border-default: var(--gray-700);
  --border-strong: var(--gray-600);

  --text-primary: var(--white);
  --text-secondary: var(--gray-300);
  --text-tertiary: var(--gray-500);
  --text-on-accent: var(--accent-fg);

  --success: oklch(0.62 0.15 150);
  --warning: oklch(0.75 0.15 85);
  --danger: oklch(0.60 0.20 25);

  --font-display: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Inter", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", "SFMono-Regular", Menlo, monospace;

  --text-display-xl: 700 clamp(3rem, 6vw, 6rem)/1.02 var(--font-display);
  --text-display-l: 700 clamp(2.25rem, 4vw, 3.75rem)/1.05 var(--font-display);
  --text-display-m: 600 2rem/1.1 var(--font-display);
  --text-heading: 600 1.5rem/1.25 var(--font-display);
  --text-subheading: 600 1.125rem/1.35 var(--font-body);
  --text-body-l: 400 1.125rem/1.55 var(--font-body);
  --text-body: 400 1rem/1.55 var(--font-body);
  --text-body-s: 400 0.875rem/1.5 var(--font-body);
  --text-label: 500 0.8125rem/1.3 var(--font-body);
  --text-mono: 400 0.8125rem/1.4 var(--font-mono);
  --text-mono-caps: 500 0.75rem/1.3 var(--font-mono);

  --tracking-tight: -0.02em;
  --tracking-wide: 0.06em;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  --radius-s: 6px;
  --radius-m: 10px;
  --radius-l: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  --shadow-s: 0 1px 2px oklch(0 0 0 / 0.4);
  --shadow-m: 0 4px 16px oklch(0 0 0 / 0.45);
  --shadow-l: 0 12px 40px oklch(0 0 0 / 0.55);
  --shadow-glow-accent: 0 0 32px oklch(0.62 0.18 255 / 0.35);

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast: 120ms;
  --duration-base: 220ms;
  --duration-slow: 420ms;
}