/**
 * Design Tokens - Grazie Design System
 * All colors in HSL format for flexible opacity manipulation
 */
:root {
  /* Dark Theme Base */
  --background: 222 47% 11%;
  --foreground: 0 0% 95%;

  /* Primary - Grazie Green */
  --primary: 142 76% 36%;
  --primary-foreground: 0 0% 100%;
  --primary-hover: 142 76% 46%;

  /* Secondary */
  --secondary: 222 47% 16%;
  --secondary-foreground: 0 0% 95%;

  /* Muted */
  --muted: 217 33% 17%;
  --muted-foreground: 215 20% 65%;

  /* Accent */
  --accent: 142 76% 36%;
  --accent-foreground: 0 0% 100%;

  /* Destructive */
  --destructive: 0 72% 51%;
  --destructive-foreground: 0 0% 100%;

  /* Borders & Inputs */
  --border: 215 28% 22%;
  --input: 215 28% 22%;
  --ring: 142 76% 36%;

  /* Cards */
  --card: 222 47% 11%;
  --card-foreground: 0 0% 95%;

  /* Border Radii */
  --radius: 1.25rem; /* 20px */
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-full: 9999px;

  /* Typography */
  --font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Computed color helpers */
  --color-background: hsl(var(--background));
  --color-foreground: hsl(var(--foreground));
  --color-primary: hsl(var(--primary));
  --color-primary-hover: hsl(var(--primary-hover));
  --color-border: hsl(var(--border));
  --color-muted: hsl(var(--muted));
  --color-muted-foreground: hsl(var(--muted-foreground));
  --color-card: hsl(var(--card));

  /* Shadows */
  --shadow-primary: 0 10px 25px -5px hsla(var(--primary) / 0.5);
  --shadow-card: 0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 8px 10px -6px rgba(0, 0, 0, 0.4);
}