@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;

    --card: 0 0% 100%;
    --card-foreground: 222.2 84% 4.9%;

    --popover: 0 0% 100%;
    --popover-foreground: 222.2 84% 4.9%;

    --primary: 222.2 47.4% 11.2%;
    --primary-foreground: 210 40% 98%;

    --secondary: 210 40% 96.1%;
    --secondary-foreground: 222.2 47.4% 11.2%;

    --muted: 210 40% 96.1%;
    --muted-foreground: 215.4 16.3% 46.9%;

    --accent: 210 40% 96.1%;
    --accent-foreground: 222.2 47.4% 11.2%;

    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;

    --info: 217.2 91.2% 59.8%;
    --info-foreground: 222.2 47.4% 11.2%;

    --success: 142.1 76.2% 36.3%;
    --success-foreground: 222.2 47.4% 11.2%;

    --warning: 45.4 93.4% 47.5%;
    --warning-foreground: 222.2 47.4% 11.2%;

    --border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;
    --ring: 222.2 84% 4.9%;

    --radius: 0.5rem;

    --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%;

    /* Dashboard card with glass effect */
    --card-glass: 0 0% 100%;
    --card-glass-foreground: 222.2 84% 4.9%;

    /* Semantic chart colors - Professional palette with deeper tones */
    --chart-revenue: 161.4 93.5% 30.4%;    /* #059669 - emerald-600 */
    --chart-orders: 221.2 83.2% 53.3%;     /* #2563eb - blue-600 */
    --chart-aov: 262.1 83.3% 57.8%;        /* #7c3aed - violet-600 */
    --chart-comparison: 32.1 94.6% 43.7%;  /* #d97706 - amber-600 */
    --chart-expense: 20.5 90.2% 48.2%;     /* #ea580c - orange-600 */
    --chart-profit: 142.1 76.2% 36.3%;     /* #16a34a - green-600 */
    --chart-secondary: 188.7 94.5% 42.7%;  /* #0891b2 - cyan-600 */
    --chart-tertiary: 335.1 77.6% 50%;     /* #db2777 - pink-600 */

    /* Trend colors - matches revenue for consistency */
    --trend-positive: 161.4 93.5% 30.4%;   /* emerald-600 */
    --trend-positive-muted: 158.1 64.4% 91.6%; /* emerald-100 */
    --trend-negative: 346.8 77.2% 49.8%;   /* rose-500 */
    --trend-negative-muted: 355.7 100% 94.7%; /* rose-100 */
  }

  .dark {
    --background: 222.2 84% 4.9%;
    --foreground: 210 40% 98%;

    --card: 222.2 84% 4.9%;
    --card-foreground: 210 40% 98%;

    --popover: 222.2 84% 4.9%;
    --popover-foreground: 210 40% 98%;

    --primary: 210 40% 98%;
    --primary-foreground: 222.2 47.4% 11.2%;

    --secondary: 217.2 32.6% 17.5%;
    --secondary-foreground: 210 40% 98%;

    --muted: 217.2 32.6% 17.5%;
    --muted-foreground: 215 20.2% 65.1%;

    --accent: 217.2 32.6% 17.5%;
    --accent-foreground: 210 40% 98%;

    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 210 40% 98%;

    --info: 217.2 91.2% 59.8%;
    --info-foreground: 210 40% 98%;

    --success: 142.1 70.6% 45.3%;
    --success-foreground: 210 40% 98%;

    --warning: 45.4 93.4% 47.5%;
    --warning-foreground: 222.2 47.4% 11.2%;

    --border: 217.2 32.6% 17.5%;
    --input: 217.2 32.6% 17.5%;
    --ring: 212.7 26.8% 83.9%;

    --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%;

    /* Dashboard card with glass effect - semi-transparent in dark mode */
    --card-glass: 222.2 47.4% 11.2%;
    --card-glass-foreground: 210 40% 98%;

    /* Semantic chart colors - brighter in dark mode for visibility (one step lighter) */
    --chart-revenue: 160.1 84.1% 39.4%;    /* #10b981 - emerald-500 */
    --chart-orders: 217.2 91.2% 59.8%;     /* #3b82f6 - blue-500 */
    --chart-aov: 258.3 89.5% 66.3%;        /* #8b5cf6 - violet-500 */
    --chart-comparison: 37.7 92.1% 50.2%;  /* #f59e0b - amber-500 */
    --chart-expense: 24.6 95% 53.1%;       /* #f97316 - orange-500 */
    --chart-profit: 142.1 76.2% 45.7%;     /* #22c55e - green-500 */
    --chart-secondary: 187.9 85.7% 53.3%;  /* #06b6d4 - cyan-500 */
    --chart-tertiary: 330.4 81.2% 60.4%;   /* #ec4899 - pink-500 */

    /* Trend colors - brighter in dark mode */
    --trend-positive: 160.1 84.1% 39.4%;   /* emerald-500 */
    --trend-positive-muted: 163.1 88.1% 19.6%; /* emerald-900 */
    --trend-negative: 351.3 94.5% 71.4%;   /* rose-400 */
    --trend-negative-muted: 343.1 87.7% 15.9%; /* rose-950 */
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground font-sans;
  }
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }
  body {
    @apply bg-background text-foreground font-sans;
  }
}

@layer components {
  /* Dashboard card with glass effect */
  .card-glass {
    @apply bg-card-glass/100 dark:bg-card-glass/60 backdrop-blur-sm border border-border/50 shadow-sm rounded-xl text-card-glass-foreground;
  }

  /* Dashboard scrollable container with custom scrollbar */
  .dashboard-scroll {
    @apply overflow-y-auto;
    scrollbar-width: thin;
    scrollbar-color: rgb(229 231 235) transparent;
  }
  .dark .dashboard-scroll {
    scrollbar-color: rgb(55 65 81) transparent;
  }
  .dashboard-scroll:hover {
    scrollbar-color: rgb(209 213 219) transparent;
  }
  .dark .dashboard-scroll:hover {
    scrollbar-color: rgb(75 85 99) transparent;
  }

  /* Dashboard motion utilities */
  .dashboard-card-hover {
    @apply transition-all duration-200 ease-out;
  }
  .dashboard-card-hover:hover {
    @apply shadow-md;
    transform: translateY(-1px);
  }

  .dashboard-value-change {
    @apply transition-[color,transform] duration-300;
  }

  .dashboard-fade-in {
    animation: dashboardFadeIn 0.3s ease-out;
  }

  .dashboard-slide-up {
    animation: dashboardSlideUp 0.3s ease-out;
  }
}

/* Dashboard animation keyframes */
@keyframes dashboardFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes dashboardSlideUp {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Staggered animation for grid items */
.dashboard-stagger > * {
  animation: dashboardSlideUp 0.3s ease-out both;
}
.dashboard-stagger > *:nth-child(1) { animation-delay: 0ms; }
.dashboard-stagger > *:nth-child(2) { animation-delay: 50ms; }
.dashboard-stagger > *:nth-child(3) { animation-delay: 100ms; }
.dashboard-stagger > *:nth-child(4) { animation-delay: 150ms; }
.dashboard-stagger > *:nth-child(5) { animation-delay: 200ms; }
.dashboard-stagger > *:nth-child(6) { animation-delay: 250ms; }
