/* ============================================================
   TOKENS
   Design system variables. Change values here to retheme.
   All colors are HSL components (no hsl() wrapper) so they can
   be composed with alpha: hsl(var(--primary) / 0.4)
   ============================================================ */

:root {
  /* ---- Color (HSL components) ---- */
  --background: 220 25% 3%;
  --foreground: 210 20% 92%;

  --card: 220 22% 7%;
  --card-foreground: 210 20% 92%;

  --primary: 195 100% 50%;
  --primary-foreground: 220 25% 3%;

  --secondary: 220 18% 12%;
  --secondary-foreground: 210 20% 85%;

  --muted: 220 18% 10%;
  --muted-foreground: 215 15% 45%;

  --accent: 195 80% 40%;
  --accent-foreground: 220 25% 3%;

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

  --border: 200 20% 14%;
  --input: 200 20% 14%;
  --ring: 195 100% 50%;

  /* ---- Semantic / brand extensions ---- */
  --glow: 195 100% 50%;
  --glow-secondary: 260 80% 65%;
  --platinum: 210 8% 75%;
  --surface-elevated: 220 20% 8%;
  --cyber-grid: 195 60% 20%;

  /* ---- Typography ---- */
  --font-display: "Outfit", system-ui, -apple-system, sans-serif;
  --font-body: "Space Grotesk", system-ui, -apple-system, sans-serif;
  --font-nav: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;

  /* ---- 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-28: 7rem;

  /* ---- Radius ---- */
  --radius-sm: 0.125rem;
  --radius: 0.5rem;
  --radius-md: 0.375rem;

  /* ---- Layout ---- */
  --container-max: 1400px;
  --container-padding: 1.5rem;

  /* ---- Shadows / glow ---- */
  --shadow-glow: 0 0 30px hsl(var(--primary) / 0.3);
  --shadow-glow-soft: 0 0 20px hsl(var(--primary) / 0.08);
  --shadow-nav: 0 4px 30px rgba(0, 0, 0, 0.5);

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --transition-fast: 200ms var(--ease-out);
  --transition: 300ms var(--ease-out);
  --transition-slow: 500ms var(--ease-out);
}