@import "tailwindcss";
@import "tw-animate-css";
@import "shadcn/tailwind.css";

@custom-variant dark (&:is(.dark *));

/* ── Theme tokens (light) ───────────────────────────── */
:root {
  color-scheme: light;

  --background:           oklch(0.97 0 0);
  --foreground:           oklch(0.145 0 0);
  --card:                 oklch(1 0 0);
  --card-foreground:      oklch(0.145 0 0);
  --popover:              oklch(1 0 0);
  --popover-foreground:   oklch(0.145 0 0);
  --primary:              oklch(0.546 0.245 262.881);
  --primary-foreground:   oklch(0.985 0 0);
  --secondary:            oklch(0.96 0.005 247);
  --secondary-foreground: oklch(0.205 0 0);
  --muted:                oklch(0.96 0.005 247);
  --muted-foreground:     oklch(0.5 0.02 247);
  --accent:               oklch(0.96 0.005 247);
  --accent-foreground:    oklch(0.205 0 0);
  --destructive:          oklch(0.577 0.245 27.325);
  --border:               oklch(0.9 0.005 247);
  --input:                oklch(0.9 0.005 247);
  --ring:                 oklch(0.546 0.245 262.881);
  --radius:               0.625rem;

  --sidebar:                     oklch(0.985 0 0);
  --sidebar-foreground:          oklch(0.145 0 0);
  --sidebar-primary:             oklch(0.546 0.245 262.881);
  --sidebar-primary-foreground:  oklch(0.985 0 0);
  --sidebar-accent:              oklch(0.96 0.005 247);
  --sidebar-accent-foreground:   oklch(0.205 0 0);
  --sidebar-border:              oklch(0.9 0.005 247);
  --sidebar-ring:                oklch(0.546 0.245 262.881);

  --chart-1: oklch(0.646 0.222 41.116);
  --chart-2: oklch(0.6 0.118 184.704);
  --chart-3: oklch(0.398 0.07 227.392);
  --chart-4: oklch(0.828 0.189 84.429);
  --chart-5: oklch(0.769 0.188 70.08);
}

/* ── Theme tokens (dark) ────────────────────────────── */
.dark {
  color-scheme: dark;

  --background:           oklch(0.145 0 0);
  --foreground:           oklch(0.985 0 0);
  --card:                 oklch(0.205 0 0);
  --card-foreground:      oklch(0.985 0 0);
  --popover:              oklch(0.205 0 0);
  --popover-foreground:   oklch(0.985 0 0);
  --primary:              oklch(0.623 0.214 259.815);
  --primary-foreground:   oklch(0.985 0 0);
  --secondary:            oklch(0.269 0 0);
  --secondary-foreground: oklch(0.985 0 0);
  --muted:                oklch(0.269 0 0);
  --muted-foreground:     oklch(0.708 0 0);
  --accent:               oklch(0.269 0 0);
  --accent-foreground:    oklch(0.985 0 0);
  --destructive:          oklch(0.704 0.191 22.216);
  --border:               oklch(1 0 0 / 10%);
  --input:                oklch(1 0 0 / 15%);
  --ring:                 oklch(0.623 0.214 259.815);

  --sidebar:                     oklch(0.205 0 0);
  --sidebar-foreground:          oklch(0.985 0 0);
  --sidebar-primary:             oklch(0.623 0.214 259.815);
  --sidebar-primary-foreground:  oklch(0.985 0 0);
  --sidebar-accent:              oklch(0.269 0 0);
  --sidebar-accent-foreground:   oklch(0.985 0 0);
  --sidebar-border:              oklch(1 0 0 / 10%);
  --sidebar-ring:                oklch(0.623 0.214 259.815);

  --chart-1: oklch(0.488 0.243 264.376);
  --chart-2: oklch(0.696 0.17 162.48);
  --chart-3: oklch(0.769 0.188 70.08);
  --chart-4: oklch(0.627 0.265 303.9);
  --chart-5: oklch(0.645 0.246 16.439);
}

@theme inline {
  --font-sans: var(--font-sans);
  --font-mono: var(--font-geist-mono);

  --color-background:           var(--background);
  --color-foreground:           var(--foreground);
  --color-card:                 var(--card);
  --color-card-foreground:      var(--card-foreground);
  --color-popover:              var(--popover);
  --color-popover-foreground:   var(--popover-foreground);
  --color-primary:              var(--primary);
  --color-primary-foreground:   var(--primary-foreground);
  --color-secondary:            var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted:                var(--muted);
  --color-muted-foreground:     var(--muted-foreground);
  --color-accent:               var(--accent);
  --color-accent-foreground:    var(--accent-foreground);
  --color-destructive:          var(--destructive);
  --color-border:               var(--border);
  --color-input:                var(--input);
  --color-ring:                 var(--ring);
  --color-sidebar:              var(--sidebar);
  --color-sidebar-foreground:   var(--sidebar-foreground);
  --color-sidebar-primary:      var(--sidebar-primary);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-accent:       var(--sidebar-accent);
  --color-sidebar-accent-foreground:  var(--sidebar-accent-foreground);
  --color-sidebar-border:       var(--sidebar-border);
  --color-sidebar-ring:         var(--sidebar-ring);
  --color-chart-1: var(--chart-1);
  --color-chart-2: var(--chart-2);
  --color-chart-3: var(--chart-3);
  --color-chart-4: var(--chart-4);
  --color-chart-5: var(--chart-5);

  --radius-sm:  calc(var(--radius) * 0.6);
  --radius-md:  calc(var(--radius) * 0.8);
  --radius-lg:  var(--radius);
  --radius-xl:  calc(var(--radius) * 1.4);
  --radius-2xl: calc(var(--radius) * 1.8);
  --radius-3xl: calc(var(--radius) * 2.2);
  --radius-4xl: calc(var(--radius) * 2.6);
}

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

/* ── Form controls (dark-mode safe) ───────────────────── */
input,
textarea,
select {
  color: var(--foreground);
  background-color: var(--card);
  caret-color: var(--foreground);
}

input::placeholder,
textarea::placeholder {
  color: var(--muted-foreground);
  opacity: 1;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
select:-webkit-autofill {
  -webkit-text-fill-color: var(--foreground);
  box-shadow: 0 0 0 1000px var(--card) inset;
  transition: background-color 9999s ease-in-out 0s;
}

/* ── Scrollbar ─────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--muted-foreground); }