/* Every color in the site is defined here and nowhere else.
   Values are shadcn/ui "zinc" as HSL triplets, consumed via hsl(var(--x)).
   --brand is the one addition: cyan, darkened in light mode to hold AA
   contrast against white. */

:root {
  --background: 0 0% 100%;
  --foreground: 240 10% 3.9%;
  --card: 0 0% 100%;
  --card-foreground: 240 10% 3.9%;
  --primary: 240 5.9% 10%;
  --primary-foreground: 0 0% 98%;
  --secondary: 240 4.8% 95.9%;
  --secondary-foreground: 240 5.9% 10%;
  --muted: 240 4.8% 95.9%;
  --muted-foreground: 240 3.8% 46.1%;
  --accent: 240 4.8% 95.9%;
  --accent-foreground: 240 5.9% 10%;
  --border: 240 5.9% 90%;
  --ring: 240 5.9% 10%;
  --brand: 192 91% 30%;
  --brand-foreground: 0 0% 100%;
  --backdrop: 240 10% 3.9%;
  --video-bg: 240 12% 3%;

  /* Sharper than the 0.5rem everyone ships. Structure comes from hairline
     borders and type, not from soft corners and drop shadows. */
  --radius: 0.1875rem;
  --shadow-sm: none;
  --shadow-md: 0 2px 10px -4px hsl(240 10% 3.9% / 0.12);
  --shadow-lg: 0 16px 40px -12px hsl(240 10% 3.9% / 0.22);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --stagger: 60ms;
}

:root[data-theme='dark'] {
  --background: 240 10% 3.9%;
  --foreground: 0 0% 98%;
  --card: 240 6% 10%;
  --card-foreground: 0 0% 98%;
  --primary: 0 0% 98%;
  --primary-foreground: 240 5.9% 10%;
  --secondary: 240 3.7% 15.9%;
  --secondary-foreground: 0 0% 98%;
  --muted: 240 3.7% 15.9%;
  --muted-foreground: 240 5% 64.9%;
  --accent: 240 3.7% 15.9%;
  --accent-foreground: 0 0% 98%;
  --border: 240 3.7% 15.9%;
  --ring: 240 4.9% 83.9%;
  --brand: 187 92% 60%;
  --brand-foreground: 240 10% 3.9%;

  --shadow-sm: none;
  --shadow-md: 0 2px 10px -4px hsl(240 30% 1% / 0.5);
  --shadow-lg: 0 16px 40px -12px hsl(240 30% 1% / 0.7);
}

/* No-JS fallback only. The inline head script always sets data-theme, so this
   block applies solely when scripting is unavailable. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --background: 240 10% 3.9%;
    --foreground: 0 0% 98%;
    --card: 240 6% 10%;
    --card-foreground: 0 0% 98%;
    --primary: 0 0% 98%;
    --primary-foreground: 240 5.9% 10%;
    --secondary: 240 3.7% 15.9%;
    --secondary-foreground: 0 0% 98%;
    --muted: 240 3.7% 15.9%;
    --muted-foreground: 240 5% 64.9%;
    --accent: 240 3.7% 15.9%;
    --accent-foreground: 0 0% 98%;
    --border: 240 3.7% 15.9%;
    --ring: 240 4.9% 83.9%;
    --brand: 187 92% 60%;
    --brand-foreground: 240 10% 3.9%;

    --shadow-sm: 0 1px 2px 0 hsl(0 0% 0% / 0.3);
    --shadow-md: 0 4px 12px -2px hsl(0 0% 0% / 0.45);
    --shadow-lg: 0 12px 32px -8px hsl(0 0% 0% / 0.6);
  }
}