/* ============================================================
   Vercel Academy — Design Tokens
   Extracted from https://vercel.com/academy/ai-sdk
   Structure: Geist primitives + shadcn-compatible semantic layer
   ============================================================ */

:root {
  /* ---------- NEUTRAL ACCENTS (Geist grayscale) -------------- */
  --accents-1: #fafafa;
  --accents-2: #eaeaea;
  --accents-3: #999;
  --accents-4: #888;
  --accents-5: #666;
  --accents-6: #444;
  --accents-7: #333;
  --accents-8: #111;

  /* ---------- SEMANTIC / shadcn COMPATIBLE ------------------- */
  --background: hsla(0, 0%, 100%, 1);
  --foreground: hsla(0, 0%, 9%, 1);

  --card: hsla(0, 0%, 100%, 1);
  --card-foreground: hsla(0, 0%, 9%, 1);

  --popover: hsla(0, 0%, 100%, 1);
  --popover-foreground: hsla(0, 0%, 9%, 1);

  --primary: hsla(0, 0%, 9%, 1);
  --primary-foreground: hsla(0, 0%, 100%, 1);

  --secondary: #0000000d;
  --secondary-foreground: hsla(0, 0%, 9%, 1);

  --muted: #0000000d;
  --muted-foreground: hsla(0, 0%, 56%, 1);

  --accent: #0000000d;
  --accent-foreground: hsla(0, 0%, 9%, 1);

  --destructive: oklch(62.56% 0.2524 23.03);
  --destructive-foreground: hsla(0, 0%, 100%, 1);

  --success: oklch(64.58% 0.1746 147.27);

  --border: #00000015;
  --input: #00000015;
  --ring: #00000014;

  /* ---------- CHART PALETTE --------------------------------- */
  --chart-1: oklch(57.61% 0.2508 258.23);   /* blue   */
  --chart-2: oklch(64.92% 0.1572 181.95);   /* teal   */
  --chart-3: oklch(55.50% 0.3008 306.12);   /* purple */
  --chart-4: oklch(81.87% 0.1969 76.46);    /* amber  */
  --chart-5: oklch(63.52% 0.238  1.01);     /* pink   */

  /* ---------- SIDEBAR --------------------------------------- */
  --sidebar: hsla(0, 0%, 100%, 1);
  --sidebar-foreground: hsla(0, 0%, 9%, 1);
  --sidebar-primary: hsla(0, 0%, 9%, 1);
  --sidebar-primary-foreground: hsla(0, 0%, 100%, 1);
  --sidebar-accent: #0000000d;
  --sidebar-accent-foreground: hsla(0, 0%, 9%, 1);
  --sidebar-border: #00000015;
  --sidebar-ring: #00000014;

  /* ---------- RAW COLOR SCALES (Tailwind-style oklch) -------- */
  --color-gray-50:  oklch(98.5% 0.002 247.839);
  --color-gray-950: oklch(13.0% 0.028 261.692);
  --color-zinc-100: oklch(96.7% 0.001 286.375);
  --color-zinc-600: oklch(44.2% 0.017 285.786);
  --color-zinc-900: oklch(21.0% 0.006 285.885);
  --color-neutral-700: oklch(37.1% 0 0);
  --color-neutral-800: oklch(26.9% 0 0);
  --color-slate-300: oklch(86.9% 0.022 252.894);

  --color-red-50:  oklch(97.1% 0.013 17.38);
  --color-red-950: oklch(25.8% 0.092 26.042);
  --color-amber-50:  oklch(98.7% 0.022 95.277);
  --color-amber-950: oklch(27.9% 0.077 45.635);
  --color-yellow-50:  oklch(98.7% 0.026 102.212);
  --color-yellow-100: oklch(97.3% 0.071 103.193);
  --color-yellow-200: oklch(94.5% 0.129 101.540);
  --color-yellow-300: oklch(90.5% 0.182 98.111);
  --color-yellow-400: oklch(85.2% 0.199 91.936);
  --color-yellow-500: oklch(79.5% 0.184 86.047);
  --color-yellow-900: oklch(42.1% 0.095 57.708);
  --color-yellow-950: oklch(28.6% 0.066 53.813);
  --color-green-50:  oklch(98.2% 0.018 155.826);
  --color-green-950: oklch(26.6% 0.065 152.934);
  --color-cyan-50:  oklch(98.4% 0.019 200.873);
  --color-cyan-200: oklch(91.7% 0.080 205.041);
  --color-cyan-900: oklch(39.8% 0.070 227.392);
  --color-cyan-950: oklch(30.2% 0.056 229.695);
  --color-indigo-50:  oklch(96.2% 0.018 272.314);
  --color-indigo-200: oklch(87.0% 0.065 274.039);
  --color-indigo-600: oklch(51.1% 0.262 276.966);
  --color-indigo-900: oklch(35.9% 0.144 278.697);
  --color-indigo-950: oklch(25.7% 0.090 281.288);
  --color-purple-50:  oklch(97.7% 0.014 308.299);
  --color-purple-950: oklch(29.1% 0.149 302.717);

  /* Vercel semantic status colors (deploy states) */
  --develop-text: oklch(57.49% 0.249 257.84);
  --preview-text: oklch(59.93% 0.274 352.55);
  --ship-text:    oklch(68.79% 0.250  27.76);

  /* ---------- RADII ---------------------------------------- */
  --radius: 6px;
  --geist-radius: 6px;
  --geist-marketing-radius: 8px;

  /* ---------- SPACING (Geist 4px base grid) ---------------- */
  --spacing: 0.25rem;
  --geist-space:     4px;
  --geist-space-2x:  8px;
  --geist-space-3x:  12px;
  --geist-space-4x:  16px;
  --geist-space-6x:  24px;
  --geist-space-8x:  32px;
  --geist-space-10x: 40px;
  --geist-space-16x: 64px;
  --geist-space-24x: 96px;
  --geist-space-32x: 128px;
  --geist-space-48x: 192px;
  --geist-space-64x: 256px;

  --geist-space-small:  32px;
  --geist-space-medium: 40px;
  --geist-space-large:  48px;

  --geist-gap:          24px;
  --geist-gap-half:     12px;
  --geist-gap-quarter:   8px;
  --geist-gap-double:   48px;
  --geist-gap-section:  32px;

  /* ---------- CONTAINERS ----------------------------------- */
  --container-xs:  20rem;
  --container-sm:  24rem;
  --container-md:  28rem;
  --container-lg:  32rem;
  --container-2xl: 42rem;
  --container-3xl: 48rem;
  --container-4xl: 56rem;
  --container-5xl: 64rem;
  --container-6xl: 72rem;
  --container-7xl: 80rem;

  /* ---------- BORDERS (design-system shadow-borders) ------- */
  --ds-shadow-border-base:   0 0 0 1px #00000014;
  --ds-shadow-border-inset:  inset 0 0 0 1px #00000014;
  --ds-shadow-border:        0 0 0 1px #00000014, 0 0 0 1px hsla(0,0%,98%,1);
  --ds-shadow-background-border: 0 0 0 1px hsla(0,0%,98%,1);

  /* ---------- SHADOWS -------------------------------------- */
  --ds-shadow-2xs:    0 1px 1px #0000000a;
  --ds-shadow-xs:     0 1px 2px #0000000a;
  --ds-shadow-small:  0 2px 2px #0000000a;
  --ds-shadow-medium: 0 2px 2px #0000000a, 0 8px 8px -8px #0000000a;
  --ds-shadow-large:  0 2px 2px #0000000a, 0 8px 16px -4px #0000000a;
  --ds-shadow-xl:     0 1px 1px #00000005, 0 4px 8px -4px #0000000a, 0 16px 24px -8px #0000000f;
  --ds-shadow-2xl:    0 1px 1px #00000005, 0 8px 16px -4px #0000000a, 0 24px 32px -8px #0000000f;

  --ds-shadow-border-small:  0 0 0 1px #00000014, 0 2px 2px #0000000a, 0 0 0 1px hsla(0,0%,98%,1);
  --ds-shadow-border-medium: 0 0 0 1px #00000014, 0 2px 2px #0000000a, 0 8px 8px -8px #0000000a, 0 0 0 1px hsla(0,0%,98%,1);
  --ds-shadow-border-large:  0 0 0 1px #00000014, 0 2px 2px #0000000a, 0 8px 16px -4px #0000000a, 0 0 0 1px hsla(0,0%,98%,1);

  --ds-shadow-menu:       0 0 0 1px #00000014, 0 1px 1px #00000005, 0 4px 8px -4px #0000000a, 0 16px 24px -8px #0000000f, 0 0 0 1px hsla(0,0%,98%,1);
  --ds-shadow-modal:      0 0 0 1px #00000014, 0 1px 1px #00000005, 0 8px 16px -4px #0000000a, 0 24px 32px -8px #0000000f, 0 0 0 1px hsla(0,0%,98%,1);
  --ds-shadow-tooltip:    0 0 0 1px #00000014, 0 1px 1px #00000005, 0 4px 8px #0000000a, 0 0 0 1px hsla(0,0%,98%,1);
  --ds-shadow-fullscreen: 0 0 0 1px #00000014, 0 1px 1px #00000005, 0 8px 16px -4px #0000000a, 0 24px 32px -8px #0000000f, 0 0 0 1px hsla(0,0%,98%,1);

  /* Legacy Geist marketing shadows */
  --shadow-smallest:    0 2px 4px #0000001a;
  --shadow-extra-small: 0 4px 8px #0000001f;
  --shadow-small:       0 5px 10px #0000001f;
  --shadow-medium:      0 8px 30px #0000001f;
  --shadow-large:       0 30px 60px #0000001f;
  --shadow-hover:       0 30px 60px #0000001f;
  --shadow-sticky:      0 12px 10px -10px #0000001f;
  --drop-shadow-lg:     0 4px 4px #00000026;

  /* ---------- MOTION --------------------------------------- */
  --ease-in:     cubic-bezier(0.4, 0, 1, 1);
  --ease-out:    cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================================
   Dark mode — invert the semantic layer.
   Vercel uses same oklch hues; neutral surfaces flip.
   ============================================================ */
.dark, [data-theme="dark"] {
  --background: hsla(0, 0%, 4%, 1);
  --foreground: hsla(0, 0%, 98%, 1);

  --card: hsla(0, 0%, 7%, 1);
  --card-foreground: hsla(0, 0%, 98%, 1);

  --popover: hsla(0, 0%, 7%, 1);
  --popover-foreground: hsla(0, 0%, 98%, 1);

  --primary: hsla(0, 0%, 98%, 1);
  --primary-foreground: hsla(0, 0%, 9%, 1);

  --secondary: #ffffff14;
  --secondary-foreground: hsla(0, 0%, 98%, 1);

  --muted: #ffffff14;
  --muted-foreground: hsla(0, 0%, 64%, 1);

  --accent: #ffffff14;
  --accent-foreground: hsla(0, 0%, 98%, 1);

  --border: #ffffff1f;
  --input: #ffffff1f;
  --ring: #ffffff24;

  --accents-1: #111;
  --accents-2: #333;
  --accents-3: #444;
  --accents-4: #666;
  --accents-5: #888;
  --accents-6: #999;
  --accents-7: #eaeaea;
  --accents-8: #fafafa;

  --sidebar: hsla(0, 0%, 7%, 1);
  --sidebar-foreground: hsla(0, 0%, 98%, 1);
  --sidebar-primary: hsla(0, 0%, 98%, 1);
  --sidebar-primary-foreground: hsla(0, 0%, 9%, 1);
  --sidebar-accent: #ffffff14;
  --sidebar-accent-foreground: hsla(0, 0%, 98%, 1);
  --sidebar-border: #ffffff1f;
  --sidebar-ring: #ffffff24;
}