:root {
  /* Brand Palette from tailwind.config.js */
  --primary: hsl(187, 100%, 42%);
  --primary-foreground: hsl(0, 0%, 100%);
  --secondary: hsl(360, 100%, 71%);
  
  /* Layout Colors */
  --background: hsl(248, 9%, 98%);
  --foreground: hsl(215, 28%, 17%);
  --card: hsl(0, 0%, 100%);
  --border: hsl(220, 14%, 90%);
  --input: hsl(220, 14%, 90%);
  --muted: hsl(220, 14%, 96%);
  --muted-foreground: hsl(220, 9%, 46%);
  
  /* Semantic Status */
  --success: hsl(122, 39%, 49%);
  --warning: hsl(45, 100%, 51%);
  --destructive: hsl(4, 90%, 58%);
  --info: hsl(207, 90%, 54%);

  /* Border Radii */
  --radius: 0.75rem;
  --radius-lg: 1rem;
}

.dark {
  --background: hsl(215, 28%, 12%);
  --foreground: hsl(248, 9%, 98%);
  --card: hsl(215, 28%, 15%);
  --border: hsl(215, 28%, 20%);
}