/* Wayreeve design tokens, v0.1 (phase 1 draft, 2026-10-25).
   Source of truth: ../DESIGN.md. Contrast ratios are listed there and verified by contrast.mjs.
   Fonts are self-hosted (SIL OFL 1.1). No runtime CDN. Paths are relative to this file. */

@font-face {
  font-family: "Host Grotesk";
  src: url("fonts/host-grotesk-latin-wght-normal.woff2") format("woff2-variations");
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Host Grotesk";
  src: url("fonts/host-grotesk-latin-ext-wght-normal.woff2") format("woff2-variations");
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}

:root {
  color-scheme: light;

  /* Neutrals: cool grey with a faint spruce cast. Text tiers are AA on every surface below. */
  --bg: #f8f9f8;            /* app canvas behind content */
  --bg-subtle: #f1f3f2;     /* sidebar, table head, hovered row */
  --bg-muted: #e7eae9;      /* selected nav, pressed, skeleton */
  --surface: #ffffff;       /* panels, inputs, tables */
  --surface-raised: #ffffff;/* dialogs, menus, palette (plus --shadow-overlay) */
  --line: #e1e5e3;          /* dividers, panel borders (decorative) */
  --line-strong: #cdd3d0;   /* table head rule, segmented controls */
  --line-control: #858e8a;  /* input and checkbox boundaries: >= 3:1 on surface */
  --ink: #0f1513;           /* primary text, primary button fill */
  --ink-2: #444d49;         /* secondary text */
  --ink-3: #5d6662;         /* tertiary text, column heads, captions */
  --ink-inverse: #ffffff;

  /* Accent: deep petrol. Links, focus, selection, the single chart series. Never a button fill. */
  --accent: #125c6b;
  --accent-strong: #0b4653;
  --accent-wash: #e4eff1;
  --focus: #125c6b;

  /* Highlighter: search hits and changed values only. Text on it is --ink. */
  --mark: #f1e987;

  /* Status. fg = text and glyph; bg = wash behind tags and callouts; line = callout border. */
  --healthy: #1c7342;   --healthy-bg: #e6f2ea;   --healthy-line: #b5d6c1;
  --degraded: #855400;  --degraded-bg: #f7eedb;  --degraded-line: #e2c78e;
  --failing: #b0261b;   --failing-bg: #fbe9e6;   --failing-line: #efbab3;
  --refused: #6a3b88;   --refused-bg: #f1eaf6;   --refused-line: #d4bfe3;
  --simulated: #2b5b9c; --simulated-bg: #e8eef8; --simulated-line: #9fb7da;
  --neutral: #5d6662;   --neutral-bg: #eef0ef;   --neutral-line: #cdd3d0;

  /* Data classes: one monochrome sensitivity ramp. Regulated classes invert. */
  --dc-public-fg: #444d49;       --dc-public-bg: transparent; --dc-public-line: #b9c0bc;
  --dc-internal-fg: #2c3431;     --dc-internal-bg: #eef0ef;   --dc-internal-line: #d5dad7;
  --dc-confidential-fg: #0f1513; --dc-confidential-bg: #dde2df; --dc-confidential-line: #c3cac6;
  --dc-regulated-fg: #0f1513;    --dc-regulated-bg: #ffffff;  --dc-regulated-line: #0f1513;

  /* Charts */
  --chart-1: #4a8795;      /* the one series: a lighter petrol so dense bars stay calm */
  --chart-2: #b5cfd4;      /* comparison series (lighter step of the same hue) */
  --chart-ref: #5d6662;    /* dashed reference line */
  --chart-grid: #e7eae9;
  --chart-bad: #b0261b;

  /* Type */
  --font-sans: "Host Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --text-11: 11px;  --lh-11: 16px;   /* micro: axis ticks, kbd, footnotes. Never body. */
  --text-12: 12px;  --lh-12: 16px;   /* caption, column heads, tag text */
  --text-13: 13px;  --lh-13: 20px;   /* table cells, dense lists, form help */
  --text-14: 14px;  --lh-14: 20px;   /* body, inputs, buttons */
  --text-16: 16px;  --lh-16: 24px;   /* section title */
  --text-20: 20px;  --lh-20: 28px;   /* page title */
  --text-28: 28px;  --lh-28: 32px;   /* KPI figure */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-strong: 600;
  --tracking-title: -0.012em;
  --tracking-figure: -0.02em;

  /* Space: 4px base */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px;

  /* Shape */
  --radius-1: 3px;  /* tags, kbd, checkboxes */
  --radius-2: 5px;  /* buttons, inputs, panels */
  --radius-3: 8px;  /* dialogs, palette, popovers */
  --shadow-overlay: 0 1px 2px rgb(15 21 19 / 0.06), 0 8px 24px rgb(15 21 19 / 0.12);

  /* Layout */
  --sidebar-w: 236px;
  --topbar-h: 48px;
  --row-h: 36px;          /* default table row; --row-h-compact 30px, --row-h-comfy 44px */
  --row-h-compact: 30px;
  --row-h-comfy: 44px;
  --content-max: 1360px;
  --gutter: 24px;

  /* Motion */
  --dur-1: 80ms;   /* hover, press */
  --dur-2: 140ms;  /* menus, popovers, toasts */
  --dur-3: 200ms;  /* dialogs, drawers */
  --ease: cubic-bezier(0.2, 0, 0, 1);
}

/* Dark: a cool near-black. Higher surfaces get lighter; no shadows on panels. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0b0e0e;
    --bg-subtle: #101414;
    --bg-muted: #1b2121;
    --surface: #131818;
    --surface-raised: #1a2020;
    --line: #232a2a;
    --line-strong: #313939;
    --line-control: #687371;
    --ink: #e7ecea;
    --ink-2: #aab3b0;
    --ink-3: #8c9693;
    --ink-inverse: #0b0e0e;
    --accent: #6fc0d0;
    --accent-strong: #97d4e0;
    --accent-wash: #10282d;
    --focus: #6fc0d0;
    --mark: #5a531b;
    --healthy: #5cc48a;   --healthy-bg: #10251a;   --healthy-line: #22543a;
    --degraded: #ddb055;  --degraded-bg: #2a2111;  --degraded-line: #5c4a1f;
    --failing: #f2867a;   --failing-bg: #2e1513;   --failing-line: #6a2c25;
    --refused: #c6a2e0;   --refused-bg: #221a2b;   --refused-line: #4c3a5f;
    --simulated: #91b4ea; --simulated-bg: #141e2c; --simulated-line: #3a5378;
    --neutral: #8c9693;   --neutral-bg: #1a1f1f;   --neutral-line: #313939;
    --dc-public-fg: #aab3b0;       --dc-public-bg: transparent; --dc-public-line: #3d4645;
    --dc-internal-fg: #c9d0cd;     --dc-internal-bg: #1d2323;   --dc-internal-line: #2d3535;
    --dc-confidential-fg: #e7ecea; --dc-confidential-bg: #2b3333; --dc-confidential-line: #3a4443;
    --dc-regulated-fg: #e7ecea;    --dc-regulated-bg: #131818;  --dc-regulated-line: #c9d0cd;
    --chart-1: #4a9aab;
    --chart-2: #2f5c66;
    --chart-ref: #8c9693;
    --chart-grid: #1f2626;
    --chart-bad: #f2867a;
    --shadow-overlay: 0 0 0 1px #2c3434, 0 12px 32px rgb(0 0 0 / 0.5);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0b0e0e;
  --bg-subtle: #101414;
  --bg-muted: #1b2121;
  --surface: #131818;
  --surface-raised: #1a2020;
  --line: #232a2a;
  --line-strong: #313939;
  --line-control: #687371;
  --ink: #e7ecea;
  --ink-2: #aab3b0;
  --ink-3: #8c9693;
  --ink-inverse: #0b0e0e;
  --accent: #6fc0d0;
  --accent-strong: #97d4e0;
  --accent-wash: #10282d;
  --focus: #6fc0d0;
  --mark: #5a531b;
  --healthy: #5cc48a;   --healthy-bg: #10251a;   --healthy-line: #22543a;
  --degraded: #ddb055;  --degraded-bg: #2a2111;  --degraded-line: #5c4a1f;
  --failing: #f2867a;   --failing-bg: #2e1513;   --failing-line: #6a2c25;
  --refused: #c6a2e0;   --refused-bg: #221a2b;   --refused-line: #4c3a5f;
  --simulated: #91b4ea; --simulated-bg: #141e2c; --simulated-line: #3a5378;
  --neutral: #8c9693;   --neutral-bg: #1a1f1f;   --neutral-line: #313939;
  --dc-public-fg: #aab3b0;       --dc-public-bg: transparent; --dc-public-line: #3d4645;
  --dc-internal-fg: #c9d0cd;     --dc-internal-bg: #1d2323;   --dc-internal-line: #2d3535;
  --dc-confidential-fg: #e7ecea; --dc-confidential-bg: #2b3333; --dc-confidential-line: #3a4443;
  --dc-regulated-fg: #e7ecea;    --dc-regulated-bg: #131818;  --dc-regulated-line: #c9d0cd;
  --chart-1: #4a9aab;
  --chart-2: #2f5c66;
  --chart-ref: #8c9693;
  --chart-grid: #1f2626;
  --chart-bad: #f2867a;
  --shadow-overlay: 0 0 0 1px #2c3434, 0 12px 32px rgb(0 0 0 / 0.5);
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-1: 0ms; --dur-2: 0ms; --dur-3: 0ms; }
}