@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
  :root {
    /* Rose Pine Dawn (Light Mode) - Enhanced Vibrancy */
    --background: 32 57% 95%; /* Base: #faf4ed */
    --foreground: 248 25% 35%; /* Text: More vibrant #4d4668 */
    --card: 35 100% 98%; /* Surface: #fffaf3 */
    --card-foreground: 248 25% 35%; /* Text: #4d4668 */
    --popover: 35 100% 98%; /* Surface: #fffaf3 */
    --popover-foreground: 248 25% 35%; /* Text: #4d4668 */
    --primary: 268 35% 55%; /* Iris: More vibrant #8b7ab8 */
    --primary-foreground: 32 57% 95%; /* Base: #faf4ed */
    --secondary: 30 40% 88%; /* Overlay: More vibrant #ede0d3 */
    --secondary-foreground: 248 25% 35%; /* Text: #4d4668 */
    --muted: 30 40% 88%; /* Overlay: More vibrant #ede0d3 */
    --muted-foreground: 248 18% 48%; /* Subtle: More vibrant #726a85 */
    --accent: 268 25% 65%; /* Softer iris for nav: #a394c7 */
    --accent-foreground: 248 25% 25%; /* Much darker text: #3e3a4f */
    --destructive: 343 45% 52%; /* Love: More vibrant #c85577 */
    --destructive-foreground: 32 57% 95%; /* Base: #faf4ed */
    --border: 30 40% 88%; /* Overlay: #ede0d3 */
    --input: 30 40% 88%; /* Overlay: #ede0d3 */
    --ring: 268 35% 55%; /* Iris: #8b7ab8 */
    --chart-1: 343 45% 52%; /* Love: More vibrant */
    --chart-2: 189 35% 45%; /* Foam: More vibrant */
    --chart-3: 197 55% 30%; /* Pine: More vibrant */
    --chart-4: 35 85% 50%; /* Gold: More vibrant */
    --chart-5: 268 55% 65%; /* Saturated Purple for favorites */
    --item-hover: 30 25% 95%; /* New: Very subtle warm hover */
    --item-selected: 268 20% 88%; /* New: Very soft iris for selected items */
    --item-selected-foreground: 248 25% 30%; /* Dark text on selected */
    --radius: 0.5rem
  }
  .dark {
    /* Rose Pine Main (Dark Mode) - Enhanced Vibrancy */
    --background: 249 22% 12%; /* Base: #191724 */
    --foreground: 245 60% 92%; /* Text: More vibrant #e6e3f7 */
    --card: 249 20% 16%; /* Surface: More vibrant #24202f */
    --card-foreground: 245 60% 92%; /* Text: #e6e3f7 */
    --popover: 249 20% 16%; /* Surface: #24202f */
    --popover-foreground: 245 60% 92%; /* Text: #e6e3f7 */
    --primary: 267 65% 80%; /* Iris: More vibrant #ceadee */
    --primary-foreground: 249 22% 12%; /* Base: #191724 */
    --secondary: 248 30% 22%; /* Overlay: More vibrant #2d2a42 */
    --secondary-foreground: 245 60% 92%; /* Text: #e6e3f7 */
    --muted: 248 30% 22%; /* Overlay: More vibrant #2d2a42 */
    --muted-foreground: 248 20% 65%; /* Subtle: More vibrant #9f9bb8 */
    --accent: 267 45% 70%; /* Muted iris for nav: #b89ad6 */
    --accent-foreground: 245 60% 92%; /* Light text: #e6e3f7 */
    --destructive: 343 80% 70%; /* Love: More vibrant #f16d96 */
    --destructive-foreground: 249 22% 12%; /* Base: #191724 */
    --border: 248 30% 22%; /* Overlay: #2d2a42 */
    --input: 248 30% 22%; /* Overlay: #2d2a42 */
    --ring: 267 65% 80%; /* Iris: #ceadee */
    --chart-1: 343 80% 70%; /* Love: More vibrant */
    --chart-2: 189 50% 75%; /* Foam: More vibrant */
    --chart-3: 197 55% 40%; /* Pine: More vibrant */
    --chart-4: 35 90% 74%; /* Gold: More vibrant */
    --chart-5: 267 75% 85%; /* Saturated Purple for favorites */
    --item-hover: 248 15% 28%; /* New: Subtle overlay hover */
    --item-selected: 267 30% 35%; /* New: Muted dark iris for selected items */
    --item-selected-foreground: 245 50% 91%; /* Light text on selected */
    --selected-bg: 35 90% 74%; /* Gold: More vibrant */
    --category-bg: 249 20% 16%; /* Surface: #24202f */
  }
}
@layer base {
  * {
    @apply border-border outline-ring/50;
  }
  body {
    @apply bg-background text-foreground;
  }
}

@layer utilities {
  .shadow-left-bottom {
    box-shadow: -4px 4px 8px rgba(0, 0, 0, 0.1), -2px 2px 4px rgba(0, 0, 0, 0.06);
  }
  .dark .shadow-left-bottom {
    box-shadow: -4px 4px 12px rgba(0, 0, 0, 0.3), -2px 2px 6px rgba(0, 0, 0, 0.2);
  }
}
