/* Design System - Loveable Theme - All colors are in HSL format */

:root {
  /* Base Colors */
  --background: 210 20% 98%;
  --foreground: 215 25% 15%;

  /* Card Colors */
  --card: 0 0% 100%;
  --card-foreground: 215 25% 15%;

  /* Popover Colors */
  --popover: 0 0% 100%;
  --popover-foreground: 215 25% 15%;

  /* Primary Colors */
  --primary: 210 100% 25%;
  --primary-foreground: 0 0% 100%;

  /* Secondary Colors */
  --secondary: 210 40% 96%;
  --secondary-foreground: 215 25% 15%;

  /* Muted Colors */
  --muted: 210 40% 96%;
  --muted-foreground: 215 20% 45%;

  /* Accent Colors */
  --accent: 210 100% 92%;
  --accent-foreground: 210 100% 25%;

  /* Status Colors */
  --success: 142 76% 36%;
  --success-foreground: 0 0% 100%;

  --warning: 38 92% 50%;
  --warning-foreground: 0 0% 100%;

  --destructive: 0 84% 60%;
  --destructive-foreground: 0 0% 100%;

  /* Input & Border */
  --border: 214 31% 91%;
  --input: 214 31% 91%;
  --ring: 210 100% 25%;

  /* Border Radius */
  --radius: 0.75rem;
  
  /* Gradients */
  --gradient-primary: linear-gradient(135deg, hsl(210 100% 25%), hsl(210 100% 35%));
  --gradient-card: linear-gradient(180deg, hsl(0 0% 100%), hsl(210 40% 98%));
  
  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
  --shadow-elevated: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  
  /* Transitions */
  --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-fast: all 0.15s ease;

  /* Sidebar Colors */
  --sidebar-background: 0 0% 98%;
  --sidebar-foreground: 240 5.3% 26.1%;
  --sidebar-primary: 240 5.9% 10%;
  --sidebar-primary-foreground: 0 0% 98%;
  --sidebar-accent: 240 4.8% 95.9%;
  --sidebar-accent-foreground: 240 5.9% 10%;
  --sidebar-border: 220 13% 91%;
  --sidebar-ring: 217.2 91.2% 59.8%;
}

.dark {
  --background: 215 28% 12%;
  --foreground: 210 40% 98%;

  --card: 215 27% 16%;
  --card-foreground: 210 40% 98%;

  --popover: 215 27% 16%;
  --popover-foreground: 210 40% 98%;

  --primary: 210 100% 50%;
  --primary-foreground: 0 0% 100%;

  --secondary: 217 32% 20%;
  --secondary-foreground: 210 40% 98%;

  --muted: 217 32% 20%;
  --muted-foreground: 215 20% 65%;

  --accent: 217 32% 22%;
  --accent-foreground: 210 40% 98%;

  --success: 142 76% 36%;
  --success-foreground: 0 0% 100%;

  --warning: 38 92% 50%;
  --warning-foreground: 0 0% 100%;

  --destructive: 0 62% 45%;
  --destructive-foreground: 0 0% 100%;

  --border: 217 32% 20%;
  --input: 217 32% 20%;
  --ring: 210 100% 50%;
  
  --gradient-primary: linear-gradient(135deg, hsl(210 100% 35%), hsl(210 100% 45%));
  --gradient-card: linear-gradient(180deg, hsl(215 27% 16%), hsl(215 28% 14%));
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.3);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.4);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.4);
  --shadow-elevated: 0 20px 25px -5px rgb(0 0 0 / 0.5), 0 8px 10px -6px rgb(0 0 0 / 0.4);
  --sidebar-background: 240 5.9% 10%;
  --sidebar-foreground: 240 4.8% 95.9%;
  --sidebar-primary: 224.3 76.3% 48%;
  --sidebar-primary-foreground: 0 0% 100%;
  --sidebar-accent: 240 3.7% 15.9%;
  --sidebar-accent-foreground: 240 4.8% 95.9%;
  --sidebar-border: 240 3.7% 15.9%;
  --sidebar-ring: 217.2 91.2% 59.8%;
}

/* Base styles */
* {
  border-color: hsl(var(--border));
}

body {
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
}

/* Animations */
@keyframes accordion-down {
  from {
    height: 0;
  }
  to {
    height: var(--radix-accordion-content-height, auto);
  }
}

@keyframes accordion-up {
  from {
    height: var(--radix-accordion-content-height, auto);
  }
  to {
    height: 0;
  }
}

.accordion-down {
  animation: accordion-down 0.2s ease-out;
}

.accordion-up {
  animation: accordion-up 0.2s ease-out;
}