:root {
  --background: var(--color-charcoal-50);
  --foreground: var(--color-charcoal-950);
  --card: #fff;
  --card-foreground: var(--color-charcoal-950);
  --popover: #fff;
  --popover-foreground: var(--color-charcoal-950);
  --primary: var(--color-coral-600);
  --primary-foreground: var(--color-charcoal-950);
  --secondary: var(--color-charcoal-100);
  --secondary-foreground: var(--color-charcoal-900);
  --muted: var(--color-charcoal-100);
  --muted-foreground: var(--color-charcoal-600);
  --accent: var(--color-coral-500);
  --accent-foreground: var(--color-charcoal-950);
  --destructive: hsl(0 84.2% 60.2%);
  --destructive-foreground: #fff;
  --border: var(--color-charcoal-200);
  --input: var(--color-charcoal-200);
  --ring: var(--color-coral-600);
  --chart-1: var(--color-coral-600);
  --chart-2: var(--color-coral-400);
  --chart-3: var(--color-charcoal-400);
  --chart-4: var(--color-coral-300);
  --chart-5: var(--color-charcoal-300);
  --radius: 0.5rem;
  --sidebar-background: hsl(0 0% 98%);
  --sidebar-foreground: hsl(240 5.3% 26.1%);
  --sidebar-primary: hsl(240 5.9% 10%);
  --sidebar-primary-foreground: hsl(0 0% 98%);
  --sidebar-accent: hsl(240 4.8% 95.9%);
  --sidebar-accent-foreground: hsl(240 5.9% 10%);
  --sidebar-border: hsl(220 13% 91%);
  --sidebar-ring: var(--color-coral-300);

  --color-charcoal-50: oklch(97.50% 0.006 85);
  --color-charcoal-100: oklch(94.35% 0.010 85);
  --color-charcoal-200: oklch(87.00% 0.012 85);
  --color-charcoal-300: oklch(80.00% 0.014 85);
  --color-charcoal-400: oklch(71.91% 0.015 85);
  --color-charcoal-500: oklch(62.00% 0.016 85);
  --color-charcoal-600: oklch(53.88% 0.016 85);
  --color-charcoal-700: oklch(39.07% 0.014 85);
  --color-charcoal-800: oklch(33.00% 0.011 85);
  --color-charcoal-900: oklch(24.04% 0.006 85);
  --color-charcoal-950: oklch(19.50% 0.004 85);

  --color-coral-50: oklch(97.00% 0.020 39.5);
  --color-coral-100: oklch(93.00% 0.045 39.5);
  --color-coral-200: oklch(86.00% 0.075 39.5);
  --color-coral-300: oklch(80.00% 0.105 39.5);
  --color-coral-400: oklch(73.38% 0.135 39.5);
  --color-coral-500: oklch(68.00% 0.155 39.5);
  --color-coral-600: oklch(62.27% 0.168 39.5);
  --color-coral-700: oklch(52.00% 0.155 39.5);
  --color-coral-800: oklch(41.00% 0.130 39.5);
  --color-coral-900: oklch(30.00% 0.095 39.5);
  --color-coral-950: oklch(22.00% 0.070 39.5);
}

.dark {
  --background: var(--color-charcoal-950);
  --foreground: var(--color-charcoal-50);
  --card: var(--color-charcoal-900);
  --card-foreground: var(--color-charcoal-50);
  --popover: var(--color-charcoal-900);
  --popover-foreground: var(--color-charcoal-50);
  --primary: var(--color-coral-600);
  --primary-foreground: var(--color-charcoal-950);
  --secondary: var(--color-charcoal-900);
  --secondary-foreground: var(--color-charcoal-50);
  --muted: var(--color-charcoal-900);
  --muted-foreground: var(--color-charcoal-400);
  --accent: var(--color-coral-500);
  --accent-foreground: var(--color-charcoal-950);
  --destructive: hsl(0 62.8% 30.6%);
  --destructive-foreground: #fff;
  --border: var(--color-charcoal-800);
  --input: var(--color-charcoal-800);
  --ring: var(--color-coral-500);
  --chart-1: var(--color-coral-500);
  --chart-2: var(--color-coral-300);
  --chart-3: var(--color-charcoal-300);
  --chart-4: var(--color-coral-200);
  --chart-5: var(--color-charcoal-400);
  --sidebar-background: var(--color-charcoal-950);
  --sidebar-foreground: var(--color-charcoal-50);
  --sidebar-primary: var(--color-coral-500);
  --sidebar-primary-foreground: #fff;
  --sidebar-accent: var(--color-charcoal-900);
  --sidebar-accent-foreground: var(--color-charcoal-50);
  --sidebar-border: var(--color-charcoal-800);
  --sidebar-ring: var(--color-coral-500);
}