@import "tailwindcss";

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

/*
 * Dark mode. <html data-theme="light|dark"> forces a theme (set from the
 * `bts_theme` cookie, see src/lib/theme.ts); without the attribute the OS
 * setting decides. `dark:` utilities follow the same rule.
 */
@custom-variant dark {
  :root[data-theme="dark"] & {
    @slot;
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) & {
      @slot;
    }
  }
}

:root {
  color-scheme: light dark;
}
:root[data-theme="light"] {
  color-scheme: light;
}
:root[data-theme="dark"] {
  color-scheme: dark;
}

/*
 * The UI is written with light-theme classes (slate surfaces, -50 tints,
 * -700/-800 text). In dark mode the palette itself is remapped so the same
 * classes read correctly: white becomes the card surface, the slate scale is
 * inverted, and the status hues swap tints for shades. 400/500 (status dots)
 * and slate-950 (modal backdrops) are left as they are.
 */
body {
  @variant dark {
    --color-white: oklch(20.8% 0.042 265.755);

    --color-slate-50: oklch(14.5% 0.042 264.7);
    --color-slate-100: oklch(27.9% 0.041 260.031);
    --color-slate-200: oklch(31.5% 0.042 258.5);
    --color-slate-300: oklch(44.6% 0.043 257.281);
    --color-slate-400: oklch(55.4% 0.046 257.417);
    --color-slate-500: oklch(70.4% 0.04 256.788);
    --color-slate-600: oklch(78% 0.03 255);
    --color-slate-700: oklch(86.9% 0.022 252.894);
    --color-slate-800: oklch(92.9% 0.013 255.508);
    --color-slate-900: oklch(96.8% 0.007 247.896);

    --color-red-50: oklch(25.8% 0.092 26.042);
    --color-red-100: oklch(39.6% 0.141 25.723);
    --color-red-200: oklch(44.4% 0.177 26.899);
    --color-red-600: oklch(70.4% 0.191 22.216);
    --color-red-700: oklch(80.8% 0.114 19.571);
    --color-red-800: oklch(88.5% 0.062 18.334);

    --color-amber-50: oklch(27.9% 0.077 45.635);
    --color-amber-100: oklch(41.4% 0.112 45.904);
    --color-amber-200: oklch(47.3% 0.137 46.201);
    --color-amber-600: oklch(82.8% 0.189 84.429);
    --color-amber-700: oklch(87.9% 0.169 91.605);
    --color-amber-800: oklch(92.4% 0.12 95.746);

    --color-emerald-50: oklch(26.2% 0.051 172.552);
    --color-emerald-100: oklch(37.8% 0.077 168.94);
    --color-emerald-200: oklch(43.2% 0.095 166.913);
    --color-emerald-600: oklch(76.5% 0.177 163.223);
    --color-emerald-700: oklch(84.5% 0.143 164.978);
    --color-emerald-800: oklch(90.5% 0.093 164.15);

    --color-sky-50: oklch(29.3% 0.066 243.157);
    --color-sky-100: oklch(39.1% 0.09 240.876);
    --color-sky-200: oklch(44.3% 0.11 240.79);
    --color-sky-600: oklch(74.6% 0.16 232.661);
    --color-sky-700: oklch(82.8% 0.111 230.318);
    --color-sky-800: oklch(90.1% 0.058 230.902);
  }

  background: var(--color-slate-50);
  color: var(--color-slate-900);
}

/* Areas that are designed dark in both themes (the login feature panel) keep the original palette. */
.light-palette {
  @variant dark {
    --color-white: #fff;
    --color-slate-50: oklch(98.4% 0.003 247.858);
    --color-slate-100: oklch(96.8% 0.007 247.896);
    --color-slate-200: oklch(92.9% 0.013 255.508);
    --color-slate-300: oklch(86.9% 0.022 252.894);
    --color-slate-400: oklch(70.4% 0.04 256.788);
    --color-slate-500: oklch(55.4% 0.046 257.417);
    --color-slate-600: oklch(44.6% 0.043 257.281);
    --color-slate-700: oklch(37.2% 0.044 257.287);
    --color-slate-800: oklch(27.9% 0.041 260.031);
    --color-slate-900: oklch(20.8% 0.042 265.755);
  }
}