/* OI-IMPL — LIMS design tokens (light default + dark) + OI viz extension.
 *
 * Ported VERBATIM from camplax/BUILD_SPEC_UI.md PART 2 (the LIMS token system),
 * with three additions for OI:
 *   1. Self-hosted @font-face for the three families (NO Google-Fonts CDN).
 *   2. Dark mode via BOTH prefers-color-scheme (system signal) AND
 *      :root[data-theme=dark] (explicit toggle) — explicit wins in both dirs.
 *   3. A viz-extension block mapping the R palette (app/R/constants.R) to tokens:
 *        COL_WASTE  -> --danger      (negative = waste)
 *        COL_SAVING -> --accent      (positive = savings)
 *        C_MUTED    -> --ink-3
 *        COL_HIDDEN -> --viz-hidden  (purple, unmeasured exposure)
 *        FAC_COLORS -> --viz-cat-1..4 (per-facility series)
 *
 * Sign convention (whole app): negative = waste, positive = savings.
 *
 * THEMING — ONE SOURCE OF TRUTH:
 *   A "skin" is one token block in THIS file; components consume only
 *   var()s. Skins: :root = "lims" (light editorial), [data-theme=navy]
 *   = the legacy piece1 ops dashboard ("dark" kept as an alias for old
 *   cookies). The app default + toggle pair come from Django settings
 *   OI_THEME_DEFAULT / OI_THEME_ALT (env-overridable) — switching the
 *   whole app's look is a one-env-var change, no code.
 */

/* ── Self-hosted fonts (woff2, latin subset) ─────────────────────────────── */
/* Fraunces — FRAME ONLY (titles, brand). Variable optical-size + weight.      */
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../vendor/fonts/fraunces-var.cc3e6b3f975c.woff2") format("woff2");
}
/* Inter — body / UI.                                                          */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../vendor/fonts/inter-var.65850a373e25.woff2") format("woff2");
}
/* JetBrains Mono — tabular numerics (.num cells, chart ticks/hover).          */
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url("../vendor/fonts/jetbrainsmono-var.570751c5f8b4.woff2") format("woff2");
}

/* ── LIGHT (canonical) — camplax LIMS verbatim ───────────────────────────── */
:root {
  --bg: #faf9f7;
  --card: #ffffff;
  --sunken: #f8f7f4;
  --sidebar: #fbfaf8;
  --ink: #1a1d21;
  --ink-2: #4a4d53;
  --ink-3: #777a80;
  --ink-4: #a2a5aa;
  --line: #e6e6e9;
  --line-2: #d5d7db;
  --accent: #258651;
  --accent-ink: #005226;
  --accent-soft: #e8f5ee;
  --warn: #c9871a;
  --warn-soft: #fdf1d8;
  --warn-ink: #844100;
  --info: #3080bc;
  --info-soft: #e6f2fb;
  --info-ink: #005189;
  --danger: #c5342f;
  --danger-soft: #fbe9e7;
  --danger-ink: #8f1e1a;
  --r-sm: 8px;
  --r: 10px;
  --r-lg: 12px;
  --shadow-xs: 0 1px 2px rgba(40, 44, 58, .05);
  --font-sans: "Inter", system-ui, sans-serif;
  --font-head: "Inter", system-ui, sans-serif;  /* legacy: sans headings (Fraunces retired 2026-07-21) */
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --font-viz-num: var(--font-sans);
  /* ── Skin-choice knobs (see THEMING) — legacy typography on light surfaces
     (Aidar 2026-07-21: "these fonts look bad, bring the old one") ── */
  --kpi-value-font: var(--font-sans);
  --kpi-value-size: 28px;
  --kpi-value-weight: 700;
  --kpi-neutral-ink: var(--ink);
  --kpi-neutral-border: var(--accent);
  --kpi-muted-ink: var(--ink);
  --kpi-muted-border: var(--line-2);
  --panel-title-font: var(--font-sans);
  --panel-title-size: 11.5px;
  --panel-title-weight: 700;
  --panel-title-case: uppercase;
  --panel-title-tracking: .08em;
  --panel-title-color: var(--ink-3);
  --h1-size: 27px;
  --h1-weight: 700;
  --nav-active-bg: var(--accent-soft);
  --row-h: 28px;                 /* compact default; comfortable = 34px */

  /* ── OI viz extension (chart series) ─────────────────────────────────── */
  --viz-waste: var(--danger);    /* negative = waste  (R COL_WASTE)          */
  --viz-saving: var(--accent);   /* positive = savings (R COL_SAVING)        */
  --viz-muted: var(--ink-3);     /* zero / null       (R C_MUTED)            */
  --viz-hidden: #9b59b6;         /* unmeasured qty    (R COL_HIDDEN)         */
  --viz-conf-high: var(--accent);
  --viz-conf-med: var(--warn);
  --viz-conf-low: var(--danger);
  --viz-cat-1: #3080bc;          /* per-facility line colors (R FAC_COLORS)  */
  --viz-cat-2: #d1832a;
  --viz-cat-3: #8a4fbd;
  --viz-cat-4: #1b9e86;
}

/* ── DARK — camplax LIMS verbatim ────────────────────────────────────────── */
/* Explicit toggle: the topbar theme button stamps data-theme="dark" and this
   selector wins over both :root and the system-preference media query below. */
:root[data-theme="navy"],
:root[data-theme="dark"] {
  --bg: #1a1a2e;
  --card: #16213e;
  --sunken: #12122a;
  --sidebar: #1a1a2e;
  --ink: #e8edf6;
  --ink-2: #b6c1d4;
  --ink-3: #8291ab;
  --ink-4: #5b6880;
  --line: #0f3460;
  --line-2: #1f4287;
  --accent: #2f8fe0;
  --accent-ink: #6db9f2;
  --accent-soft: #12294a;
  --warn: #d79628;
  --warn-soft: #2a2110;
  --warn-ink: #e8b866;
  --info: #348dcf;
  --info-soft: #0f2233;
  --info-ink: #7ab8e6;
  --danger: #e05a54;
  --danger-soft: #2c1512;
  --danger-ink: #f0938e;
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, .35);
  --viz-hidden: #b07fd6;
  --viz-cat-1: #4fa3e0;
  --viz-cat-2: #e0a24a;
  --viz-cat-3: #a877d6;
  --viz-cat-4: #35c0a6;
  /* legacy piece1 look (mubu 2026-07-21): sans headings in dark */
  --font-head: "Inter", system-ui, sans-serif;
  --font-viz-num: var(--font-sans);
  /* ── Skin-choice knobs — legacy piece1 values ── */
  --kpi-value-font: var(--font-sans);
  --kpi-value-size: 28px;
  --kpi-value-weight: 700;
  --kpi-neutral-ink: var(--info-ink);
  --kpi-neutral-border: var(--info);
  --kpi-muted-ink: var(--danger-ink);
  --kpi-muted-border: var(--danger);
  --panel-title-font: var(--font-sans);
  --panel-title-size: 11.5px;
  --panel-title-weight: 700;
  --panel-title-case: uppercase;
  --panel-title-tracking: .08em;
  --panel-title-color: var(--ink-3);
  --h1-size: 27px;
  --h1-weight: 700;
  --nav-active-bg: transparent;
}

/* System preference — applies only when NO explicit data-theme is stamped on
   <html> (base.html omits the attribute entirely until the user picks). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --bg: #1a1a2e;
    --card: #16213e;
    --sunken: #12122a;
    --sidebar: #1a1a2e;
    --ink: #e8edf6;
    --ink-2: #b6c1d4;
    --ink-3: #8291ab;
    --ink-4: #5b6880;
    --line: #0f3460;
    --line-2: #1f4287;
    --accent: #2f8fe0;
    --accent-ink: #6db9f2;
    --accent-soft: #12294a;
    --warn: #d79628;
    --warn-soft: #2a2110;
    --warn-ink: #e8b866;
    --info: #348dcf;
    --info-soft: #0f2233;
    --info-ink: #7ab8e6;
    --danger: #e05a54;
    --danger-soft: #2c1512;
    --danger-ink: #f0938e;
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, .35);
    --viz-hidden: #b07fd6;
    --viz-cat-1: #4fa3e0;
    --viz-cat-2: #e0a24a;
    --viz-cat-3: #a877d6;
    --viz-cat-4: #35c0a6;
  /* legacy piece1 look (mubu 2026-07-21): sans headings in dark */
  --font-head: "Inter", system-ui, sans-serif;
  --font-viz-num: var(--font-sans);
  }
}
/* Explicit light choice must beat system-dark. :root[data-theme="light"]
   (specificity 0,1,1) + later in the cascade overrides the media block. */
:root[data-theme="light"] {
  --bg: #faf9f7;
  --card: #ffffff;
  --sunken: #f8f7f4;
  --sidebar: #fbfaf8;
  --ink: #1a1d21;
  --ink-2: #4a4d53;
  --ink-3: #777a80;
  --ink-4: #a2a5aa;
  --line: #e6e6e9;
  --line-2: #d5d7db;
  --accent: #258651;
  --accent-ink: #005226;
  --accent-soft: #e8f5ee;
  --warn: #c9871a;
  --warn-soft: #fdf1d8;
  --warn-ink: #844100;
  --info: #3080bc;
  --info-soft: #e6f2fb;
  --info-ink: #005189;
  --danger: #c5342f;
  --danger-soft: #fbe9e7;
  --danger-ink: #8f1e1a;
  --shadow-xs: 0 1px 2px rgba(40, 44, 58, .05);
  --viz-hidden: #9b59b6;
  --viz-cat-1: #3080bc;
  --viz-cat-2: #d1832a;
  --viz-cat-3: #8a4fbd;
  --viz-cat-4: #1b9e86;
}

/* ── Base typography (camplax verbatim) ──────────────────────────────────── */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 13px;
  letter-spacing: -.005em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h1, .h-title { font-family: var(--font-head); font-weight: 600; letter-spacing: -.015em; }
.num { font-family: var(--font-viz-num, var(--font-mono)); font-variant-numeric: tabular-nums; text-align: right; }
.card {
  background: var(--card);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-xs);
  outline: 1px solid color-mix(in srgb, var(--ink) 9%, transparent);
}