/* Design tokens — ported verbatim from src/index.css (:root / .dark blocks).
   Kept in the same "H S% L%" triple format so hsl(var(--x)) usage matches
   the original Tailwind theme mapping exactly. */

:root {
  --background: 220 20% 97%;
  --foreground: 222 47% 11%;

  --card: 220 27% 98%;
  --card-foreground: 222 47% 11%;

  --popover: 0 0% 100%;
  --popover-foreground: 222 47% 11%;

  --primary: 224 86% 63%;
  --primary-foreground: 0 0% 100%;

  --secondary: 220 27% 98%;
  --secondary-foreground: 222 47% 11%;

  --muted: 220 16% 90%;
  --muted-foreground: 222 47% 11%;

  --accent: 224 86% 63%;
  --accent-foreground: 0 0% 100%;

  --destructive: 0 84% 60%;
  --destructive-foreground: 0 0% 98%;

  --border: 220 13% 91%;
  --input: 220 13% 91%;
  --ring: 224 86% 63%;

  --radius: 1rem;
  --radius-xl: 1.25rem;
  --radius-2xl: 1.5rem;
  --radius-3xl: 2rem;
  --radius-4xl: 3rem;

  /* Brand blues */
  --electric: 224 86% 63%;
  --electric-light: 220 100% 72%;
  --electric-muted: 224 62% 52%;
  --hot: 224 62% 52%;
  --hot-muted: 224 86% 63%;
  --surface: 224 100% 97%;
  --surface-elevated: 0 0% 100%;

  /* Gradients */
  --gradient-electric: linear-gradient(135deg, hsl(224 86% 63%) 0%, hsl(214 100% 72%) 100%);
  --gradient-hot: linear-gradient(135deg, hsl(224 62% 52%) 0%, hsl(224 86% 63%) 100%);
  --gradient-surface: linear-gradient(180deg, hsl(224 100% 97%) 0%, hsl(0 0% 100%) 100%);
  --gradient-glow: radial-gradient(circle at 50% 50%, hsl(224 86% 63% / 0.12) 0%, transparent 60%);
  --gradient-hero: linear-gradient(135deg, hsl(224 86% 63%) 0%, hsl(214 100% 72%) 50%, hsl(224 86% 63%) 100%);
  --gradient-soft-blue: linear-gradient(180deg, hsl(224 100% 97%) 0%, hsl(220 20% 97%) 100%);
  --gradient-soft-dark: linear-gradient(180deg, hsl(222 47% 11%) 0%, hsl(222 47% 8%) 100%);

  /* Premium shadows & glows */
  --shadow-glow: 0 0 80px hsl(224 86% 63% / 0.15);
  --shadow-glow-strong: 0 0 120px hsl(224 86% 63% / 0.25);
  --shadow-glow-hot: 0 0 100px hsl(224 62% 52% / 0.2);
  --shadow-soft: 0 4px 20px hsl(222 47% 11% / 0.06);
  --shadow-elevated: 0 12px 40px hsl(222 47% 11% / 0.1);
  --shadow-button: 0 4px 14px hsl(224 86% 63% / 0.4);
  --shadow-button-hover: 0 8px 30px hsl(224 86% 63% / 0.55);
}

/* The marketing site never toggles next-themes' .dark class (no theme
   switcher is exposed to visitors — see src/components/Providers.tsx),
   so it always renders the light palette above. No dark-mode block here
   on purpose, to match that current behavior. */