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

@layer base {
  :root {
    /* Sorbet Studio palette (2026-07 app-wide restyle).
       Semantic slots re-pointed at the dashboard's Studio hues so the whole
       app shares one warm system: ground #f8f7f5, ink #2b2925, hairline
       #e7e5e1, wells #f0eeea, coral #e06a4e as the working accent. */
    --background: 40 17.6% 96.7%;          /* #f8f7f5 - Studio ground */
    --foreground: 40 7.5% 15.7%;           /* #2b2925 - Studio ink */

    --card: 0 0% 100%;
    --card-foreground: 40 7.5% 15.7%;

    --popover: 0 0% 100%;
    --popover-foreground: 40 7.5% 15.7%;

    --primary: 40 7.5% 15.7%;              /* ink - actions stay neutral; coral is accent-only */
    --primary-foreground: 40 23.1% 97.5%;  /* #faf9f7 */

    --secondary: 40 16.7% 92.9%;           /* #f0eeea - Studio well */
    --secondary-foreground: 40 7.5% 15.7%;

    --muted: 40 16.7% 92.9%;               /* #f0eeea */
    --muted-foreground: 40 5.1% 46.3%;     /* #7c7870 - Studio muted */

    --accent: 40 16.7% 92.9%;
    --accent-foreground: 40 7.5% 15.7%;

    --destructive: 8.8 47.9% 47.5%;        /* #b3503f - Studio down */
    --destructive-foreground: 40 23.1% 97.5%;

    --info: 205.4 46.8% 46.5%;             /* #3f7fae - slate blue (chart-secondary) */
    --info-foreground: 40 7.5% 15.7%;

    --success: 149.0 55.4% 30.8%;          /* #237a4d - Studio up */
    --success-foreground: 40 7.5% 15.7%;

    --warning: 39.1 64.7% 40.0%;           /* #a87a24 - Studio amber */
    --warning-foreground: 40 7.5% 15.7%;

    --border: 40 11.1% 89.4%;              /* #e7e5e1 - Studio hairline */
    --input: 40 11.1% 89.4%;
    --ring: 11.5 70.2% 59.2%;              /* #e06a4e - coral focus */

    /* Extra Studio surface: subtle wells inside white cards (#faf9f7) */
    --surface-subtle: 40 23.1% 97.5%;

    /* Studio working accent (#e06a4e) - use sparingly: focus rings, one
       accent per section, active highlights. Not for buttons. */
    --coral: 11.5 70.2% 59.2%;

    --radius: 0.625rem;

    --sidebar-background: 36 17.2% 94.3%;  /* #f3f1ee - a step deeper than ground */
    --sidebar-foreground: 33.3 5.5% 32.4%; /* #57534e */
    --sidebar-primary: 40 7.5% 15.7%;
    --sidebar-primary-foreground: 40 23.1% 97.5%;
    --sidebar-accent: 37.5 16.0% 90.2%;    /* #eae7e2 - active/hover well */
    --sidebar-accent-foreground: 40 7.5% 15.7%;
    --sidebar-border: 40 11.1% 89.4%;
    --sidebar-ring: 11.5 70.2% 59.2%;

    /* Dashboard card with glass effect */
    --card-glass: 0 0% 100%;
    --card-glass-foreground: 40 7.5% 15.7%;

    /* Semantic chart colors - Sorbet Studio palette (must match METRIC_COLORS) */
    --chart-revenue: 11.5 70.2% 59.2%;     /* #e06a4e - Studio coral */
    --chart-orders: 246.9 48.1% 57.6%;     /* #6b5fc7 - Studio violet */
    --chart-aov: 39.1 64.7% 40.0%;         /* #a87a24 - Studio amber */
    --chart-comparison: 168.8 81.0% 31.0%; /* #0f8f77 - Studio teal */
    --chart-expense: 41.2 84.8% 31.0%;     /* #92680c - dark gold */
    --chart-profit: 147.8 51.3% 37.1%;     /* #2e8f5b - green */
    --chart-secondary: 205.4 46.8% 46.5%;  /* #3f7fae - slate blue */
    --chart-tertiary: 340.8 53.0% 54.9%;   /* #c94f76 - berry */

    /* Trend colors - Studio semantic up/down */
    --trend-positive: 148.6 55.7% 31.2%;   /* #237a4d */
    --trend-positive-muted: 148 35% 92%;
    --trend-negative: 12.3 42.2% 47.5%;    /* #b3503f */
    --trend-negative-muted: 12 55% 94%;
  }

  .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 - Sorbet Studio palette (dashboard is light-first;
       kept identical so charts stay on-palette if dark ever returns) */
    --chart-revenue: 11.5 70.2% 59.2%;     /* #e06a4e - Studio coral */
    --chart-orders: 246.9 48.1% 57.6%;     /* #6b5fc7 - Studio violet */
    --chart-aov: 39.1 64.7% 40.0%;         /* #a87a24 - Studio amber */
    --chart-comparison: 168.8 81.0% 31.0%; /* #0f8f77 - Studio teal */
    --chart-expense: 41.2 84.8% 31.0%;     /* #92680c - dark gold */
    --chart-profit: 147.8 51.3% 37.1%;     /* #2e8f5b - green */
    --chart-secondary: 205.4 46.8% 46.5%;  /* #3f7fae - slate blue */
    --chart-tertiary: 340.8 53.0% 54.9%;   /* #c94f76 - berry */

    /* 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: #e7e5e1 transparent;
  }
  .dark .dashboard-scroll {
    scrollbar-color: rgb(55 65 81) transparent;
  }
  .dashboard-scroll:hover {
    scrollbar-color: #d8d4cd 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;
  }

  /* Full dashboard controls intentionally stay denser than the rest of the app. */
  .dashboard-page [role="tablist"] {
    @apply h-8 rounded-full bg-muted/60 p-0.5;
  }

  .dashboard-page [role="tab"] {
    @apply h-7 rounded-full px-2.5 text-xs;
  }

  .dashboard-page [role="combobox"] {
    @apply h-8 text-xs;
  }

  .dashboard-page .recharts-cartesian-grid line {
    stroke-opacity: 0.45;
  }

  .dashboard-page .recharts-legend-item-text {
    @apply text-xs text-muted-foreground;
  }
}

/* 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; }
