/* ============================================================
   base/variables.css — design tokens (single source of truth)
   All color is bare HSL triplets applied as hsl(var(--token)).
   ============================================================ */
:root {
  /* Color (HSL triplets) */
  --background: 0 0% 6%;
  --foreground: 40 20% 92%;

  --card: 0 0% 8%;
  --card-foreground: 40 20% 92%;
  --popover: 0 0% 8%;
  --popover-foreground: 40 20% 92%;

  --primary: 43 74% 49%;
  --primary-foreground: 0 0% 6%;
  --accent: 43 74% 49%;
  --accent-foreground: 0 0% 6%;

  --secondary: 0 0% 12%;
  --secondary-foreground: 40 20% 92%;
  --muted: 0 0% 14%;
  --muted-foreground: 40 10% 60%;

  --destructive: 0 62% 50%;
  --destructive-foreground: 40 20% 92%;

  --border: 0 0% 16%;
  --input: 0 0% 16%;
  --ring: 43 74% 49%;

  /* Radius */
  --radius: 0.375rem;
  --radius-md: calc(var(--radius) - 2px);
  --radius-sm: calc(var(--radius) - 4px);

  /* Typography */
  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-body: 'Inter', system-ui, sans-serif;

  /* Shadows */
  --shadow-soft: 0 4px 24px -2px hsl(0 0% 0% / 0.4);
  --shadow-card: 0 8px 32px -4px hsl(0 0% 0% / 0.5);
  --shadow-elevated: 0 16px 48px -8px hsl(0 0% 0% / 0.6);

  /* Transitions */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 300ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 500ms cubic-bezier(0.4, 0, 0.2, 1);
}