/* Design tokens (UI_SPEC section 3). Every colour, size, spacing, radius, line, shadow and motion value used by
   the UI lives here; app.css and app.js only reference these custom properties. */
:root {
  color-scheme: light;
  /* colour: two records of the same hospital. declared = CMDB, signal = evidence that contradicts it */
  --paper: #F2F5F8;            /* page: cool clinical paper (DESIGN_FINAL 2) */
  --surface: #FFFFFF;
  --ink: #16202B;
  --ink-muted: #56616D;
  --rule: #D3DBE3;
  --rule-strong: #6B7782;       /* graph lines and arrowheads: 4.3:1 on paper */
  --declared: #2C5A8C;
  --signal: #B73228;
  --caution: #9A6400;
  --steady: #2E6B48;
  --signal-tint: #F8E6E4;       /* impacted node fill; ink 13.5:1 on it */
  --declared-tint: #E6EEF6;     /* selected row, active toggle */
  --on-accent: #FFFFFF;         /* text on declared / signal fills */
  --skeleton: #E7EBEE;
  --overlay: rgba(24, 33, 43, 0.32);
  --shadow-overlay: 0 6px 20px rgba(24, 33, 43, 0.12);   /* overlays only: drawer, tooltip, tour card, toast */
  --hero-bg: #EAF0F5;           /* tinted bands: ink 14.2:1, ink-muted 5.6:1, declared 6.0:1, signal 5.2:1 */
  --grid-line: rgba(47, 93, 138, 0.07);
  --hover-fill: #F0F4F8;        /* caution text on it 4.5:1, ink-muted 5.8:1 */
  --active-fill: #D8E3EE;
  --frame-line: #C3CDD8;        /* the frame's vertical and horizontal rules */
  --net-line: rgba(44, 90, 140, 0.08);   /* margin network: blueprint blue at 8% */
  --net-signal: rgba(183, 50, 40, 0.2);  /* the one missing link in each margin */

  /* type */
  --font-ui: "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-id: "Atkinson Hyperlegible Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --t-13: 13px;
  --t-15: 15px;
  --t-17: 17px;
  --t-21: 21px;
  --t-28: 28px;
  --t-40: 40px;
  --t-48: 48px;                 /* landing headline only */
  --w-body: 400;
  --w-strong: 600;
  --w-bold: 700;
  --ls-display: -0.02em;
  --ls-title: -0.01em;
  --lh-body: 1.5;
  --lh-head: 1.2;
  --measure: 75ch;

  /* spacing (4-px base) */
  --s-4: 4px;
  --s-8: 8px;
  --s-12: 12px;
  --s-16: 16px;
  --s-24: 24px;
  --s-32: 32px;
  --s-48: 48px;
  --s-64: 64px;
  --s-96: 96px;                 /* between landing sections */

  /* shape and lines */
  --r-control: 6px;
  --r-panel: 12px;
  --r-button: 8px;
  --header-h: 64px;
  --t-22: 22px;
  --t-32: 32px;
  --t-56: 56px;
  --t-18: 18px;                 /* landing body */
  --t-36: 36px;                 /* section and page titles */
  --t-60: 60px;                 /* hero headline */
  --ls-hero: -0.025em;
  --lh-hero: 1.05;
  --node-sq: 8px;               /* square node where a frame rule meets the frame */
  --step-sq: 28px;              /* square step number on the agent's sequence */
  --icon: 20px;                 /* header icons */
  --bar-h: 24px;                /* benchmark bars */
  --s-80: 80px;
  --r-none: 0;
  --line: 1px;
  --line-graph: 1.5px;
  --line-bold: 3px;
  --focus: 2px;
  --focus-offset: 2px;
  --dash-observed: 6 4;
  --dash-declared-only: 1.5 4;
  --dash-failover: 8 3 1.5 3;
  --faded: 0.3;

  /* layout */
  --content-max: 1120px;
  --frame-landing: 1280px;      /* landing frame incl. 48 px inner padding (DESIGN_FINAL 3) */
  --frame-tool: 1440px;         /* tool pages: frame incl. 32 px inner padding */
  --map-w: 420px;               /* each of the two landing maps */
  --net-w: 360px;               /* margin network tile */
  --net-h: 960px;
  --gutter: 24px;
  --list-w: 300px;
  --drawer-w: 560px;
  --drawer-wide: 960px;
  --control-h: 44px;
  --tier-gutter: 128px;
  --tier-gap: 104px;
  --node-w: 176px;
  --node-h: 40px;
  --group-w: 208px;
  --group-h: 52px;
  --node-gap: 24px;
  --badge-w: 40px;
  --canvas-min-h: 240px;
  --panel-max-h: 320px;
  --tip-max: 360px;
  --chip-h: 22px;
  --chevron: 5px;               /* half-width of the select arrow */
  --chain-w: 480px;             /* overview headline diagram */
  --measure-head: 22ch;
  --spot-reach: 9999px;         /* tour spotlight: the shadow that dims the rest of the page */
  --toast-life: 4000;           /* ms, read by app.js */

  /* motion: only in response to the user */
  --motion: 180ms;
  --mask-on: #FFFFFF;           /* SVG mask: white = visible (not a visible colour) */
  --motion-draw: 900ms;         /* the landing chain: the one orchestrated motion */
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --paper: #141A20;
    --surface: #1B232B;
    --ink: #E7ECEF;
    --ink-muted: #A3AEB7;
    --rule: #2E3943;
    --rule-strong: #8A97A3;
    --declared: #7FA8D4;
    --signal: #F07068;
    --caution: #E0A84A;
    --steady: #6FBF8E;
    --signal-tint: #3A2524;
    --declared-tint: #1F2D3B;
    --on-accent: #1B232B;
    --skeleton: #243039;
    --overlay: rgba(0, 0, 0, 0.5);
    --shadow-overlay: 0 6px 20px rgba(0, 0, 0, 0.4);
    --hero-bg: #1F2A36;
    --grid-line: rgba(127, 168, 212, 0.07);
    --hover-fill: #222C38;      /* signal text on it 4.9:1 */
    --active-fill: #2E3C4B;
    --frame-line: #3A4652;
    --net-line: rgba(127, 168, 212, 0.06);
    --net-signal: rgba(240, 112, 104, 0.16);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #141A20;
  --surface: #1B232B;
  --ink: #E7ECEF;
  --ink-muted: #A3AEB7;
  --rule: #2E3943;
  --rule-strong: #8A97A3;
  --declared: #7FA8D4;
  --signal: #F07068;
  --caution: #E0A84A;
  --steady: #6FBF8E;
  --signal-tint: #3A2524;
  --declared-tint: #1F2D3B;
  --on-accent: #1B232B;
  --skeleton: #243039;
  --overlay: rgba(0, 0, 0, 0.5);
  --shadow-overlay: 0 6px 20px rgba(0, 0, 0, 0.4);
  --hero-bg: #1F2A36;
  --grid-line: rgba(127, 168, 212, 0.07);
  --hover-fill: #222C38;
  --active-fill: #2E3C4B;
  --frame-line: #3A4652;
  --net-line: rgba(127, 168, 212, 0.06);
  --net-signal: rgba(240, 112, 104, 0.16);
}

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