/* Semantic design tokens: "ink & paper".
   Surfaces are warm paper (sand), the sidebar is always ink (sage-dark), the signal colour is deep teal.
   Components use only these tokens. Scales come from scales.css, which swaps to dark values in the dark
   theme, so most tokens below need no dark override. Contrast is verified by scripts/check-contrast.mjs. */
:root {
  color-scheme: light;

  /* surfaces */
  --bg: var(--sand-2);
  --surface: #ffffff;
  --surface-2: var(--sand-3);
  --surface-3: var(--sand-4);
  --surface-raised: #ffffff;
  --border: var(--sand-6);
  --border-strong: var(--sand-7);
  --control-border: var(--sand-9);     /* form controls: >= 3:1 on surfaces (WCAG 1.4.11) */
  --text: var(--sand-12);
  --muted: var(--sand-11);

  /* accent (signal) */
  --accent: #007464;                   /* teal-11 darkened 13%: AA on tinted surfaces */
  --accent-hover: var(--teal-12);
  --accent-ink: #ffffff;               /* text on --accent */
  --accent-soft: var(--teal-3);
  --accent-soft-hover: var(--teal-4);
  --accent-line: var(--teal-8);
  --focus: var(--teal-11);

  /* status */
  --ok: #1d754e;               --ok-bg: var(--green-3);       --ok-line: var(--green-7);
  --warn: #965800;             --warn-bg: var(--amber-3);     --warn-line: var(--amber-7);
  --danger: var(--red-11);     --danger-bg: var(--red-3);     --danger-line: var(--red-7);
  --info: #0c68b9;             --info-bg: var(--blue-3);      --info-line: var(--blue-7);
  --violet: var(--violet-11);  --violet-bg: var(--violet-3);  --violet-line: var(--violet-7);

  /* sidebar: always dark, in both themes */
  --nav-bg: var(--ink-2);
  --nav-deep: var(--ink-1);
  --nav-hover: var(--ink-4);
  --nav-border: var(--ink-5);
  --nav-text: var(--ink-12);
  --nav-muted: var(--ink-11);
  --nav-active-bg: var(--glow-3);
  --nav-active: var(--glow-11);

  /* elevation, radius, motion */
  --shadow-xs: 0 1px 2px rgb(24 22 15 / 6%);
  --shadow-card: 0 1px 2px rgb(24 22 15 / 4%), 0 12px 32px -20px rgb(24 22 15 / 24%);
  --shadow-pop: 0 18px 44px -14px rgb(24 22 15 / 30%), 0 2px 8px rgb(24 22 15 / 10%);
  --scrim: rgb(14 14 10 / 50%);
  --r-xs: 6px; --r-sm: 8px; --r: 10px; --r-lg: 14px; --r-xl: 20px;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);

  /* type */
  --font: "IBM Plex Sans Variable", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Bricolage Grotesque Variable", "IBM Plex Sans Variable", ui-sans-serif, system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* layout */
  --sidebar-w: 272px;
  --content-max: 1200px;
  --row-h: 52px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: var(--sand-1);
    --surface: var(--sand-2);
    --surface-raised: var(--sand-3);
    --accent-ink: var(--teal-1);
    --accent: var(--teal-11); --ok: var(--green-11); --warn: var(--amber-11); --info: var(--blue-11);
    --shadow-xs: 0 1px 2px rgb(0 0 0 / 40%);
    --shadow-card: 0 1px 2px rgb(0 0 0 / 30%), 0 12px 32px -20px rgb(0 0 0 / 70%);
    --shadow-pop: 0 18px 44px -14px rgb(0 0 0 / 70%), 0 2px 8px rgb(0 0 0 / 40%);
    --scrim: rgb(0 0 0 / 62%);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: var(--sand-1);
  --surface: var(--sand-2);
  --surface-raised: var(--sand-3);
  --accent-ink: var(--teal-1);
  --accent: var(--teal-11); --ok: var(--green-11); --warn: var(--amber-11); --info: var(--blue-11);
  --shadow-xs: 0 1px 2px rgb(0 0 0 / 40%);
  --shadow-card: 0 1px 2px rgb(0 0 0 / 30%), 0 12px 32px -20px rgb(0 0 0 / 70%);
  --shadow-pop: 0 18px 44px -14px rgb(0 0 0 / 70%), 0 2px 8px rgb(0 0 0 / 40%);
  --scrim: rgb(0 0 0 / 62%);
}