/*
 * Theme tokens (roadmap 6.12).
 *
 * One file, three consumers: the SPA, the server-rendered pages that
 * stay server-rendered (login, registration, password reset), and the
 * canvas modules, which read --text/--muted/--border/--primary/
 * --track-graph-focus off the computed root style to draw with the
 * page's own palette instead of a hardcoded one.
 *
 * It lives in Django's static tree rather than inside frontend/ on
 * purpose: the login page must not depend on a Vite build, and the SPA
 * can read a Django-served stylesheet just as easily as a bundled one
 * (the dev server proxies /static to Django for exactly this).
 *
 * The palette values below are the ones the dashboard has been using -
 * moved here verbatim from styles.css, which now inherits them. The
 * additions are the ones a dense instrument needs: spacing, radii, a
 * monospace stack for numbers, and severity colours that were previously
 * spelled out per rule in CSS.
 */

:root {
  color-scheme: light;
  --bg: #f6f7f9;
  --card-bg: #ffffff;
  --panel: var(--card-bg);
  --text: #18202a;
  --muted: #667085;
  --border: #d8dde6;
  --primary: #1f6feb;
  --primary-dark: #174ea6;
  --danger: #b42318;
  --warning-bg: #fff7d6;
  --warning-border: #e6c767;
  --warning-text: #4f3f00;
  --success-bg: #edf9f0;
  --success-border: #8ccf9f;
  --success-text: #166534;
  --error-bg: #fff0f0;
  --error-border: #ef9a9a;
  --error-text: #991b1b;
  --info-bg: #eef4ff;
  --info-border: #9ec5ff;
  --info-text: #174ea6;
  --track-graph-focus: #0e8c60;

  /* Severity, in one place. The feed, the waterfall overlay and the
     badges all key off these, so a change is a change everywhere. */
  --severity-low: #7a8699;
  --severity-medium: #c98a1b;
  --severity-high: #e06c2b;
  --severity-critical: #d63b3b;

  /* Density. The instrument's whole feel comes from these being small
     and consistent rather than from any component library. */
  --space-1: 2px;
  --space-2: 4px;
  --space-3: 8px;
  --space-4: 12px;
  --space-5: 16px;
  --space-6: 24px;
  --space-7: 32px;

  --radius-1: 3px;
  --radius-2: 6px;

  --font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  /* Self-hosted nothing: font-src is 'self' and stays that way, so the
     monospace stack is whatever the machine already has. Numbers and
     frequencies are set in it so columns of digits line up. */
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  --font-size-1: 11px;
  --font-size-2: 12px;
  --font-size-3: 13px;
  --font-size-4: 15px;
  --font-size-5: 19px;

  --line-tight: 1.3;
  --line-normal: 1.5;

  /* Layout. The left rail is fixed-width; the work area takes the rest. */
  --nav-width: 190px;
  --header-height: 44px;
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f6f7f9;
  --card-bg: #ffffff;
  --panel: var(--card-bg);
  --text: #18202a;
  --muted: #667085;
  --border: #d8dde6;
  --primary: #1f6feb;
  --primary-dark: #174ea6;
  --danger: #b42318;
  --warning-bg: #fff7d6;
  --warning-border: #e6c767;
  --warning-text: #4f3f00;
  --success-bg: #edf9f0;
  --success-border: #8ccf9f;
  --success-text: #166534;
  --error-bg: #fff0f0;
  --error-border: #ef9a9a;
  --error-text: #991b1b;
  --info-bg: #eef4ff;
  --info-border: #9ec5ff;
  --info-text: #174ea6;
  --track-graph-focus: #0e8c60;

  --severity-low: #7a8699;
  --severity-medium: #b57b12;
  --severity-high: #c85c1c;
  --severity-critical: #b42318;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #101418;
  --card-bg: #171d24;
  --panel: var(--card-bg);
  --text: #eef2f6;
  --muted: #a5afbd;
  --border: #2b3440;
  --primary: #69a2ff;
  --primary-dark: #3d7fe0;
  --danger: #ff6b6b;
  --warning-bg: #2c260f;
  --warning-border: #79621b;
  --warning-text: #ffe9a3;
  --success-bg: #10291a;
  --success-border: #2f8f4e;
  --success-text: #b8f2c8;
  --error-bg: #341516;
  --error-border: #a33b3f;
  --error-text: #ffc4c4;
  --info-bg: #10243c;
  --info-border: #356aa8;
  --info-text: #c7ddff;
  --track-graph-focus: #199e70;

  --severity-low: #7a8699;
  --severity-medium: #d9a13b;
  --severity-high: #f08a4b;
  --severity-critical: #ff5f5f;
}