/*
 * VSM Brand Tokens — single source of truth
 *
 * Consumed by:
 *   • Legacy HTML/CSS (via <link> in each *.html file)
 *   • React + shadcn/ui (via <link> in app.html; tailwind.config.ts reads these vars)
 *
 * Color values use HSL channel format (e.g., `45 72% 47%`) so shadcn can compose
 * alpha variants: hsl(var(--primary) / 0.5)
 *
 * Legacy CSS that needs a resolved color must wrap usage: hsl(var(--primary))
 */

:root {
  /* ── Color (light) ────────────────────────────────────── */
  --background: 210 20% 98%;
  --foreground: 220 10% 10%;

  --card: 0 0% 100%;
  --card-foreground: 220 10% 10%;

  --popover: 0 0% 100%;
  --popover-foreground: 220 10% 10%;

  --primary: 45 72% 47%;
  /* Dark ink on gold — white-on-gold (#ceac25) fails WCAG AA (~2:1); dark is ~7:1. */
  --primary-foreground: 220 10% 10%;

  --secondary: 0 0% 96%;
  --secondary-foreground: 220 10% 10%;

  --muted: 210 14% 93%;
  --muted-foreground: 215 10% 46%;

  --accent: 45 72% 47%;
  /* Dark ink on gold accent — same contrast fix as --primary-foreground. */
  --accent-foreground: 220 10% 10%;

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

  --success: 142 72% 36%;
  --success-foreground: 0 0% 100%;

  --warning: 38 92% 50%;
  --warning-foreground: 220 10% 10%;

  --border: 220 13% 90%;
  --input: 220 13% 90%;
  --ring: 45 72% 47%;

  /* ── Color variants (previously phantom) ─────────────── */
  --primary-hover: 45 72% 42%;
  --primary-light: 45 72% 92%;
  --primary-glow: 45 80% 55%;
  --accent-light: 45 72% 92%;
  --success-light: 142 72% 92%;
  --warning-light: 38 92% 92%;

  /* ── Glasgow Energy accents (Sprint 2 redesign) ──────── */
  --accent-ember: 15 100% 60%;
  --accent-cobalt: 220 92% 57%;
  --accent-pink: 340 100% 65%;
  --accent-lime: 75 90% 55%;
  --bg-cream: 40 60% 95%;

  --radius: 0.5rem;

  /* ── Sidebar ──────────────────────────────────────────── */
  --sidebar-background: 220 10% 10%;
  --sidebar-foreground: 0 0% 90%;
  --sidebar-primary: 45 72% 47%;
  --sidebar-primary-foreground: 0 0% 100%;
  --sidebar-accent: 220 10% 16%;
  --sidebar-accent-foreground: 0 0% 94%;
  --sidebar-border: 220 10% 16%;
  --sidebar-ring: 45 72% 47%;
  --sidebar-muted-foreground: 220 10% 56%;

  /* ── Shadow scale ────────────────────────────────────── */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md: 0 2px 4px -1px rgb(0 0 0 / 0.06), 0 4px 6px -1px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 4px 6px -2px rgb(0 0 0 / 0.05), 0 10px 15px -3px rgb(0 0 0 / 0.1);
  --shadow-xl: 0 10px 10px -5px rgb(0 0 0 / 0.04), 0 20px 25px -5px rgb(0 0 0 / 0.1);
  --shadow-premium: 0 20px 60px -15px hsl(45 72% 47% / 0.45);

  /* ── Motion ──────────────────────────────────────────── */
  --motion-fast: 150ms;
  --motion-base: 250ms;
  --motion-slow: 400ms;
  --ease-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.6, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --transition-fast: var(--motion-fast) var(--ease-out);
  --transition-smooth: var(--motion-base) var(--ease-out);

  /* ── Gradients ───────────────────────────────────────── */
  --gradient-primary: linear-gradient(135deg, hsl(45 72% 47%), hsl(45 80% 55%));
  --gradient-hero: linear-gradient(135deg, hsl(220 10% 10%), hsl(220 10% 20%));
  --gradient-secondary: linear-gradient(135deg, hsl(0 0% 96%), hsl(210 14% 93%));
  --gradient-accent: linear-gradient(135deg, hsl(45 72% 47%), hsl(45 80% 60%));
  --gradient-premium: linear-gradient(135deg, hsl(220 10% 10%), hsl(45 72% 47%));

  /* ── Spacing scale (4px base) ────────────────────────── */
  --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-24: 6rem;

  /* ── Type scale ──────────────────────────────────────── */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-4xl: 2.25rem;
  --text-5xl: 3rem;
  --text-6xl: 3.75rem;

  --leading-tight: 1.2;
  --leading-snug: 1.375;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
}

.dark {
  --background: 220 15% 7%;
  --foreground: 0 0% 95%;

  --card: 220 15% 10%;
  --card-foreground: 0 0% 95%;

  --popover: 220 15% 10%;
  --popover-foreground: 0 0% 95%;

  --primary: 45 72% 47%;
  /* Dark ink on gold — white-on-gold (#ceac25) fails WCAG AA (~2:1); dark is ~7:1. */
  --primary-foreground: 220 10% 10%;

  --secondary: 220 10% 16%;
  --secondary-foreground: 0 0% 95%;

  --muted: 220 10% 16%;
  --muted-foreground: 220 10% 56%;

  --accent: 45 72% 47%;
  /* Dark ink on gold accent — same contrast fix as --primary-foreground. */
  --accent-foreground: 220 10% 10%;

  --destructive: 0 62% 30%;
  --destructive-foreground: 0 0% 95%;

  --border: 220 10% 10%;
  --input: 220 10% 10%;
  --ring: 45 72% 47%;

  --sidebar-background: 220 15% 5%;
  --sidebar-foreground: 0 0% 90%;
  --sidebar-primary: 45 72% 47%;
  --sidebar-primary-foreground: 0 0% 100%;
  --sidebar-accent: 220 10% 12%;
  --sidebar-accent-foreground: 0 0% 94%;
  --sidebar-border: 220 10% 12%;
  --sidebar-ring: 45 72% 47%;
  --sidebar-muted-foreground: 220 10% 56%;

  /* ── Color variants (previously phantom) ─────────────── */
  --primary-hover: 45 72% 52%;
  --primary-light: 45 30% 18%;
  --primary-glow: 45 80% 60%;
  --accent-light: 45 30% 18%;
  --success-light: 142 30% 18%;
  --warning-light: 38 50% 18%;

  /* ── Glasgow Energy accents (Sprint 2 redesign) ──────── */
  --accent-ember: 15 80% 50%;
  --accent-cobalt: 220 85% 65%;
  --accent-pink: 340 90% 70%;
  --accent-lime: 75 70% 50%;
  --bg-cream: 40 30% 12%;
}