/*
 * Sentinel design tokens (spec §19.2). Every visual decision in the app
 * reads one of these variables; Tailwind utilities map onto them through
 * @theme in globals.css. Light is the default; [data-theme="dark"] on <html>
 * switches the palette (src/theme.ts keeps it in sync with the user's
 * choice and the OS). Documented in src/design/README.md and shown live at
 * /design.
 */

:root {
  color-scheme: light;

  /* --- Color: surfaces and text ------------------------------------- */
  --bg: oklch(98.5% 0.003 285); /* page background */
  --bg-subtle: oklch(96.5% 0.004 285); /* sidebar, table header */
  --surface: oklch(100% 0 0); /* cards, inputs */
  --surface-raised: oklch(100% 0 0); /* popovers, dialogs */
  --surface-sunken: oklch(95% 0.005 285); /* code, wells */
  --fg: oklch(20% 0.02 285); /* primary text */
  --fg-muted: oklch(45% 0.02 285); /* secondary text */
  --fg-subtle: oklch(60% 0.015 285); /* placeholders, disabled */
  --border: oklch(88% 0.008 285);
  --border-strong: oklch(78% 0.012 285);
  --ring: oklch(55% 0.2 300); /* focus ring */
  --overlay: oklch(15% 0.02 285 / 0.45);

  /* --- Color: brand (the logo's hub violet) and semantic -------------- */
  --accent: oklch(50% 0.21 300);
  --accent-hover: oklch(44% 0.21 300);
  --accent-fg: oklch(100% 0 0);
  --accent-soft: oklch(94% 0.04 300);
  --danger: oklch(52% 0.2 27);
  --danger-hover: oklch(46% 0.2 27);
  --danger-fg: oklch(100% 0 0);
  --danger-soft: oklch(95% 0.03 27);
  --success-soft: oklch(95% 0.04 160);
  --warning-soft: oklch(96% 0.05 80);
  --info-soft: oklch(95% 0.03 240);

  /*
   * --- Status palette -----------------------------------------------
   * Colour-blind safe (Okabe–Ito hues, tuned for contrast on both
   * themes). Every status also has a distinct icon shape (see
   * src/design/status.ts), so colour is never the only cue:
   *   OK          bluish green   check in a circle
   *   WARNING     amber          triangle
   *   CRITICAL    vermilion      octagon
   *   UNKNOWN     purple         question mark in a diamond
   *   STALE       grey-blue      clock
   *   MAINTENANCE sky blue       wrench
   */
  --status-ok: oklch(58% 0.14 165);
  --status-ok-fg: oklch(32% 0.1 165);
  --status-ok-soft: oklch(94% 0.05 165);
  --status-warning: oklch(74% 0.16 75);
  --status-warning-fg: oklch(42% 0.12 70);
  --status-warning-soft: oklch(95% 0.07 85);
  --status-critical: oklch(58% 0.21 35);
  --status-critical-fg: oklch(40% 0.18 33);
  --status-critical-soft: oklch(94% 0.05 33);
  --status-unknown: oklch(60% 0.15 320);
  --status-unknown-fg: oklch(40% 0.14 320);
  --status-unknown-soft: oklch(95% 0.04 320);
  --status-stale: oklch(62% 0.03 250);
  --status-stale-fg: oklch(42% 0.03 250);
  --status-stale-soft: oklch(94% 0.006 250);
  --status-maintenance: oklch(62% 0.13 235);
  --status-maintenance-fg: oklch(40% 0.11 235);
  --status-maintenance-soft: oklch(94% 0.04 235);

  /* --- Charts (categorical, also Okabe–Ito) -------------------------- */
  --chart-1: oklch(55% 0.17 250);
  --chart-2: oklch(70% 0.16 70);
  --chart-3: oklch(60% 0.14 165);
  --chart-4: oklch(58% 0.19 35);
  --chart-5: oklch(60% 0.15 320);
  --chart-6: oklch(50% 0.03 250);
  --chart-grid: oklch(90% 0.006 285);

  /* --- Type scale ---------------------------------------------------- */
  --font-sans:
    "Inter Variable", "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --text-2xs: 0.6875rem; /* 11px: dense table meta */
  --text-xs: 0.75rem; /* 12px */
  --text-sm: 0.8125rem; /* 13px: default UI text */
  --text-base: 0.875rem; /* 14px: body copy */
  --text-md: 1rem; /* 16px */
  --text-lg: 1.125rem; /* 18px: section titles */
  --text-xl: 1.375rem; /* 22px: page titles */
  --text-2xl: 1.75rem; /* 28px: big numbers */
  --leading-tight: 1.2;
  --leading-normal: 1.45;
  --tracking-caps: 0.04em;

  /* --- Spacing (4px grid) and layout --------------------------------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --sidebar-w: 14.5rem;
  --topbar-h: 3rem;
  --row-h: 2.25rem; /* dense table row */
  --control-h: 2rem; /* inputs, buttons */

  /* --- Radius -------------------------------------------------------- */
  --radius-sm: 0.25rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;
  --radius-xl: 0.75rem;
  --radius-full: 9999px;

  /* --- Elevation ----------------------------------------------------- */
  --shadow-sm: 0 1px 2px oklch(20% 0.02 260 / 0.06);
  --shadow-md: 0 2px 8px -2px oklch(20% 0.02 260 / 0.12), 0 1px 2px oklch(20% 0.02 260 / 0.06);
  --shadow-lg: 0 12px 32px -8px oklch(20% 0.02 260 / 0.2), 0 2px 6px oklch(20% 0.02 260 / 0.08);

  /* --- Motion -------------------------------------------------------- */
  --motion-fast: 120ms;
  --motion-normal: 200ms;
  --motion-slow: 320ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-enter: cubic-bezier(0, 0, 0.2, 1);
  --ease-exit: cubic-bezier(0.4, 0, 1, 1);
}

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

  --bg: oklch(17% 0.012 285);
  --bg-subtle: oklch(20% 0.012 285);
  --surface: oklch(22% 0.012 285);
  --surface-raised: oklch(25% 0.014 285);
  --surface-sunken: oklch(15% 0.01 285);
  --fg: oklch(94% 0.005 285);
  --fg-muted: oklch(72% 0.012 285);
  --fg-subtle: oklch(58% 0.012 285);
  --border: oklch(30% 0.012 285);
  --border-strong: oklch(40% 0.014 285);
  --ring: oklch(72% 0.16 300);
  --overlay: oklch(5% 0.01 285 / 0.6);

  --accent: oklch(72% 0.16 300);
  --accent-hover: oklch(78% 0.12 300);
  --accent-fg: oklch(14% 0.03 300);
  --accent-soft: oklch(32% 0.075 300);
  --danger: oklch(66% 0.19 27);
  --danger-hover: oklch(72% 0.18 27);
  --danger-fg: oklch(14% 0.03 27);
  --danger-soft: oklch(28% 0.06 27);
  --success-soft: oklch(27% 0.05 160);
  --warning-soft: oklch(28% 0.05 80);
  --info-soft: oklch(27% 0.04 240);

  --status-ok: oklch(72% 0.15 165);
  --status-ok-fg: oklch(85% 0.12 165);
  --status-ok-soft: oklch(28% 0.06 165);
  --status-warning: oklch(80% 0.16 80);
  --status-warning-fg: oklch(88% 0.13 85);
  --status-warning-soft: oklch(30% 0.07 80);
  --status-critical: oklch(70% 0.19 35);
  --status-critical-fg: oklch(85% 0.12 35);
  --status-critical-soft: oklch(30% 0.08 33);
  --status-unknown: oklch(74% 0.14 320);
  --status-unknown-fg: oklch(86% 0.1 320);
  --status-unknown-soft: oklch(30% 0.06 320);
  --status-stale: oklch(66% 0.03 250);
  --status-stale-fg: oklch(82% 0.02 250);
  --status-stale-soft: oklch(28% 0.01 250);
  --status-maintenance: oklch(74% 0.12 235);
  --status-maintenance-fg: oklch(86% 0.09 235);
  --status-maintenance-soft: oklch(29% 0.06 235);

  --chart-1: oklch(72% 0.14 250);
  --chart-2: oklch(80% 0.15 75);
  --chart-3: oklch(74% 0.14 165);
  --chart-4: oklch(72% 0.18 35);
  --chart-5: oklch(75% 0.13 320);
  --chart-6: oklch(70% 0.02 250);
  --chart-grid: oklch(28% 0.01 285);

  --shadow-sm: 0 1px 2px oklch(0% 0 0 / 0.4);
  --shadow-md: 0 2px 8px -2px oklch(0% 0 0 / 0.5), 0 1px 2px oklch(0% 0 0 / 0.4);
  --shadow-lg: 0 12px 32px -8px oklch(0% 0 0 / 0.7), 0 2px 6px oklch(0% 0 0 / 0.5);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-fast: 0ms;
    --motion-normal: 0ms;
    --motion-slow: 0ms;
  }
}