/* ═══════════════════════════════════════════════════════════════════════════
   BAS-IP · design tokens (shadcn/ui compatible)
   ─────────────────────────────────────────────────────────────────────────
   All colours are HSL *triples* consumed as `hsl(var(--x))` so Tailwind's
   opacity modifiers (`bg-primary/10`) keep working.

   Theme switching is pure CSS:
     • `<html class="dark">`            → dark palette
     • `<html data-accent="blue">`      → accent preset
     • `<html data-density="compact">`  → tighter metrics
   No CDN, no runtime JS framework — see resources/js/theme.js for the
   pre-paint script that applies the saved/auto-detected choice.
   ═══════════════════════════════════════════════════════════════════════════ */

@layer base {
  :root {
    /* ── neutrals (zinc) ─────────────────────────────────────────────── */
    --background: 0 0% 100%;
    --foreground: 240 10% 3.9%;

    --card: 0 0% 100%;
    --card-foreground: 240 10% 3.9%;

    --popover: 0 0% 100%;
    --popover-foreground: 240 10% 3.9%;

    --muted: 240 4.8% 95.9%;
    --muted-foreground: 240 3.8% 46.1%;

    --border: 240 5.9% 90%;
    --input: 240 5.9% 90%;

    --secondary: 240 4.8% 95.9%;
    --secondary-foreground: 240 5.9% 10%;

    --accent: 240 4.8% 95.9%;
    --accent-foreground: 240 5.9% 10%;

    /* ── accent (default: slate/graphite) ────────────────────────────── */
    --primary: 240 5.9% 10%;
    --primary-foreground: 0 0% 98%;
    --ring: 240 5.9% 10%;

    /* ── semantic states ─────────────────────────────────────────────── */
    --destructive: 0 72% 51%;
    --destructive-foreground: 0 0% 98%;
    --success: 142 71% 33%;
    --success-foreground: 0 0% 98%;
    --warning: 32 95% 44%;
    --warning-foreground: 0 0% 98%;
    --info: 217 91% 55%;
    --info-foreground: 0 0% 98%;

    /* ── chrome ──────────────────────────────────────────────────────── */
    --sidebar: 240 4.8% 97.5%;
    --sidebar-foreground: 240 5.9% 10%;
    --sidebar-accent: 240 4.8% 92%;
    --sidebar-border: 240 5.9% 90%;

    --shadow-color: 240 10% 20%;
    --radius: 0.65rem;

    --header-height: 3.75rem;
    --sidebar-width: 16.5rem;
    --sidebar-width-sm: 4.25rem;

    --chart-1: 217 91% 55%;
    --chart-2: 142 71% 40%;
    --chart-3: 32 95% 50%;
    --chart-4: 280 65% 58%;
    --chart-5: 190 80% 42%;
    --chart-grid: 240 5.9% 90%;
  }

  /* ═══════════════════════ dark theme ═══════════════════════ */
  .dark {
    --background: 240 10% 3.9%;
    --foreground: 0 0% 98%;

    --card: 240 8% 5.9%;
    --card-foreground: 0 0% 98%;

    --popover: 240 8% 6.5%;
    --popover-foreground: 0 0% 98%;

    --muted: 240 5% 12%;
    --muted-foreground: 240 5% 64.9%;

    --border: 240 5% 16%;
    --input: 240 5% 19%;

    --secondary: 240 5% 12%;
    --secondary-foreground: 0 0% 98%;

    --accent: 240 5% 15%;
    --accent-foreground: 0 0% 98%;

    --primary: 0 0% 98%;
    --primary-foreground: 240 5.9% 10%;
    --ring: 240 4.9% 65%;

    --destructive: 0 63% 50%;
    --destructive-foreground: 0 0% 98%;
    --success: 142 60% 42%;
    --success-foreground: 0 0% 98%;
    --warning: 38 92% 55%;
    --warning-foreground: 240 10% 6%;
    --info: 213 94% 62%;
    --info-foreground: 240 10% 6%;

    --sidebar: 240 9% 5%;
    --sidebar-foreground: 0 0% 96%;
    --sidebar-accent: 240 5% 12%;
    --sidebar-border: 240 5% 14%;

    --shadow-color: 240 12% 1%;

    --chart-1: 213 94% 65%;
    --chart-2: 142 65% 52%;
    --chart-3: 38 92% 60%;
    --chart-4: 280 70% 68%;
    --chart-5: 190 85% 55%;
    --chart-grid: 240 5% 16%;
  }

  /* ═══════════════════════ accent presets ═══════════════════════ */
  [data-accent='blue'] { --primary: 217 91% 55%; --primary-foreground: 0 0% 100%; --ring: 217 91% 55%; }
  [data-accent='blue'].dark { --primary: 213 94% 62%; --primary-foreground: 240 10% 6%; --ring: 213 94% 62%; }

  [data-accent='green'] { --primary: 142 71% 35%; --primary-foreground: 0 0% 100%; --ring: 142 71% 35%; }
  [data-accent='green'].dark { --primary: 142 65% 48%; --primary-foreground: 0 0% 98%; --ring: 142 65% 48%; }

  [data-accent='violet'] { --primary: 262 83% 58%; --primary-foreground: 0 0% 100%; --ring: 262 83% 58%; }
  [data-accent='violet'].dark { --primary: 263 80% 68%; --primary-foreground: 240 10% 6%; --ring: 263 80% 68%; }

  [data-accent='orange'] { --primary: 24 95% 50%; --primary-foreground: 0 0% 100%; --ring: 24 95% 50%; }
  [data-accent='orange'].dark { --primary: 25 95% 60%; --primary-foreground: 240 10% 6%; --ring: 25 95% 60%; }

  [data-accent='rose'] { --primary: 346 77% 50%; --primary-foreground: 0 0% 100%; --ring: 346 77% 50%; }
  [data-accent='rose'].dark { --primary: 343 80% 64%; --primary-foreground: 240 10% 6%; --ring: 343 80% 64%; }

  [data-accent='teal'] { --primary: 174 72% 32%; --primary-foreground: 0 0% 100%; --ring: 174 72% 32%; }
  [data-accent='teal'].dark { --primary: 173 68% 46%; --primary-foreground: 240 10% 6%; --ring: 173 68% 46%; }

  /* ═══════════════════════ density presets ═══════════════════════ */
  [data-density='compact'] {
    --header-height: 3.25rem;
    --row-py: 0.375rem;
    --radius: 0.5rem;
  }
  [data-density='comfortable'] { --row-py: 0.625rem; }

  /* ═══════════════════════ base ═══════════════════════ */
  * { @apply border-border; }

  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-behavior: smooth;
    scrollbar-gutter: stable;
  }

  body {
    @apply bg-background text-foreground antialiased;
    font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11', 'ss01';
    font-variation-settings: normal;
    text-rendering: optimizeLegibility;
    min-height: 100dvh;
    /* Kill the horizontal rubber-band on mobile while keeping vertical scroll. */
    overscroll-behavior-x: none;
  }

  /* Nicer scrollbars that follow the theme. */
  * {
    scrollbar-width: thin;
    scrollbar-color: hsl(var(--muted-foreground) / .35) transparent;
  }
  *::-webkit-scrollbar { width: 10px; height: 10px; }
  *::-webkit-scrollbar-track { background: transparent; }
  *::-webkit-scrollbar-thumb {
    background-color: hsl(var(--muted-foreground) / .28);
    border-radius: 9999px;
    border: 2px solid transparent;
    background-clip: content-box;
  }
  *::-webkit-scrollbar-thumb:hover { background-color: hsl(var(--muted-foreground) / .5); }

  ::selection { background-color: hsl(var(--primary) / .18); }

  :focus-visible {
    @apply outline-none ring-2 ring-ring ring-offset-2 ring-offset-background;
  }

  /* Respect the user's motion preference — this app polls the gate a lot. */
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: .001ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: .001ms !important;
      scroll-behavior: auto !important;
    }
  }

  /* Print: hide chrome, keep tables readable. */
  @media print {
    .no-print, nav, aside, header, footer { display: none !important; }
    body { background: #fff; color: #000; }
    .card, .table-wrap { box-shadow: none !important; border-color: #ddd !important; }
    a[href]::after { content: ' (' attr(href) ')'; font-size: .75em; color: #555; }
  }
}