/* DLSA design tokens (WPUX.2 synthesis, 2026-10-01).
 *
 * One file, two themes. Light is the default on :root; dark follows the OS preference unless the
 * reader chose a theme (html[data-theme]). The classes .theme-light and .theme-dark scope a theme
 * to one subtree (the styleguide page shows both side by side; the Design canvas artboards use them). The colour values are the contract that
 * docs/ux/contrast_check.py verifies: every pair it lists meets WCAG 2.x AA (4.5:1 for text,
 * 3:1 for non-text boundaries, strokes and focus rings) with a 0.15 margin, in both themes.
 *
 * Encoding rule (design section 4.1): hue carries STATE and nothing else; dash carries ORIGIN
 * (dashed = model-proposed); four bars carry TRUST LEVEL. Roles, tiers and systems have no hue.
 *
 * Fonts: Inter and JetBrains Mono are self-hosted by WPUX.3 under /static/fonts/ (font-src 'self');
 * the @font-face rules live in the app's fonts.css, so this file works without them (system fallback).
 */

:root,
.theme-light {
  /* ---- surfaces ---- */
  --bg: #F4F6F8;
  --surface: #FFFFFF;
  --surface-2: #EDF0F4;
  --sel-bg: #E4ECFB;
  --line: #D5DBE3;
  --line-strong: #6F7E8E;
  --canvas: #FFFFFF;
  --scrim: rgba(10, 15, 24, 0.45);

  /* ---- ink ---- */
  --ink: #16202B;
  --ink-2: #46525F;
  --ink-3: #56636F;

  /* ---- action ---- */
  --accent: #1D4ED8;
  --accent-hover: #1A44BE;
  --on-accent: #FFFFFF;
  --link: #1D4ED8;
  --focus: #1D4ED8;
  --danger: #B42318;
  --on-danger: #FFFFFF;
  --danger-text: #B42318;

  /* ---- state tones (ink on tint); the only hues with a meaning ---- */
  --decision-ink: #7A4A00;
  --decision-bg: #FFF0D1;
  --trusted-ink: #146C3B;
  --trusted-bg: #DCF5E5;
  --published-ink: #0E6B68;
  --published-bg: #D5F2F0;
  --rejected-ink: #A32626;
  --rejected-bg: #FCE4E4;
  --escalated-ink: #5A3BB8;
  --escalated-bg: #ECE7FA;
  --running-ink: #1D4ED8;
  --running-bg: #E3EBFF;
  --neutral-ink: #46525F;
  --neutral-bg: #EDF0F4;

  /* ---- graph (hue = state; width and dash are set by the component) ---- */
  --edge-known: #7F8B99;
  --edge-decision: #9A6300;
  --edge-trusted: #1E8A4C;
  --edge-published: #138A86;
  --edge-rejected: #C8373D;
  --edge-escalated: #6F4FD0;
  --node-fill: #EDF0F4;
  --node-stroke: #6F7E8E;
  --focus-node: #1D4ED8;

  /* ---- trust bars (four bars, filled left to right) ---- */
  --bar-fill: #46525F;
  --bar-empty: #D5DBE3;

  /* ---- code and evidence ---- */
  --code-bg: #F1F3F6;
  --code-hl-bg: #FFF0D1;

  /* ---- toast (inverted surface) ---- */
  --toast-bg: #16202B;
  --toast-ink: #FFFFFF;
  --toast-link: #9CC0FF;

  /* ---- elevation ---- */
  --e-1: 0 4px 16px rgba(10, 15, 24, 0.12);
  --e-2: 0 16px 48px rgba(10, 15, 24, 0.24);

  /* ---- type ---- */
  --font-sans: "Inter", ui-sans-serif, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --t-display: 600 32px/40px var(--font-sans);
  --t-h1: 600 22px/28px var(--font-sans);
  --t-h2: 600 17px/24px var(--font-sans);
  --t-h3: 600 15px/22px var(--font-sans);
  --t-body: 400 15px/22px var(--font-sans);
  --t-body-strong: 600 15px/22px var(--font-sans);
  --t-sm: 400 13px/18px var(--font-sans);
  --t-sm-strong: 500 13px/18px var(--font-sans);
  --t-label: 600 12px/16px var(--font-sans);
  --t-caption: 400 12px/16px var(--font-sans);
  --t-code: 400 13px/20px var(--font-mono);
  --tracking-display: -0.01em;

  /* ---- spacing (4-based) ---- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-12: 48px;
  --sp-16: 64px;

  /* ---- fixed sizes ---- */
  --topbar-h: 52px;
  --rail-w: 220px;
  --rail-w-collapsed: 56px;
  --dock-w: 360px;
  --dock-float-h: 520px;
  --drawer-w: 520px;
  --list-w: 360px;
  --content-min: 640px;
  --control-h: 36px;
  --control-h-sm: 30px;
  --chip-h: 24px;
  --row-h: 64px;
  --table-row-h: 44px;
  --footer-h: 56px;
  --gutter: 24px;
  --card-pad: 20px;
  --readout-min: 232px;
  --graph-min: 560px;

  /* ---- radii ---- */
  --r-1: 4px;
  --r-2: 8px;
  --r-3: 12px;
  --r-pill: 999px;

  /* ---- motion ---- */
  --dur-1: 120ms;
  --dur-2: 200ms;
  --dur-3: 280ms;
  --ease-enter: cubic-bezier(0.2, 0, 0, 1);
  --ease-exit: cubic-bezier(0.4, 0, 1, 1);
  --undo-window: 10000ms;

  /* ---- z-order ---- */
  --z-rail: 10;
  --z-topbar: 20;
  --z-popover: 30;
  --z-dock-float: 35;
  --z-drawer: 40;
  --z-dialog: 50;
  --z-toast: 60;

  /* ---- focus ---- */
  --focus-ring: 2px solid var(--focus);
  --focus-offset: 2px;

  color-scheme: light;
}

/* Dark follows the OS unless the reader chose light. The block is byte-identical to the explicit
   dark block below; contrast_check.py asserts that. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0E1217;
    --surface: #161B22;
    --surface-2: #1D242E;
    --sel-bg: #1B2A44;
    --line: #2A3340;
    --line-strong: #637186;
    --canvas: #161B22;
    --scrim: rgba(0, 0, 0, 0.6);
    --ink: #E8EDF3;
    --ink-2: #B3BDC9;
    --ink-3: #8C98A6;
    --accent: #2563EB;
    --accent-hover: #2158D9;
    --on-accent: #FFFFFF;
    --link: #7AB0FF;
    --focus: #7AB0FF;
    --danger: #D92D20;
    --on-danger: #FFFFFF;
    --danger-text: #F28B8B;
    --decision-ink: #F2C14E;
    --decision-bg: #3A2E10;
    --trusted-ink: #6FD39A;
    --trusted-bg: #113524;
    --published-ink: #5ED3CD;
    --published-bg: #0F3432;
    --rejected-ink: #F28B8B;
    --rejected-bg: #3F1A1C;
    --escalated-ink: #BBA6F5;
    --escalated-bg: #2A2347;
    --running-ink: #7AB0FF;
    --running-bg: #15284A;
    --neutral-ink: #B3BDC9;
    --neutral-bg: #1D242E;
    --edge-known: #6B7888;
    --edge-decision: #E0A82E;
    --edge-trusted: #3FBF75;
    --edge-published: #38B8B2;
    --edge-rejected: #E06066;
    --edge-escalated: #9F86EA;
    --node-fill: #26303C;
    --node-stroke: #8C98A6;
    --focus-node: #7AB0FF;
    --bar-fill: #B3BDC9;
    --bar-empty: #2A3340;
    --code-bg: #0E1217;
    --code-hl-bg: #3A2E10;
    --toast-bg: #E8EDF3;
    --toast-ink: #16202B;
    --toast-link: #1D4ED8;
    --e-1: 0 4px 16px rgba(0, 0, 0, 0.5);
    --e-2: 0 16px 48px rgba(0, 0, 0, 0.6);
    color-scheme: dark;
  }
}

:root[data-theme="dark"],
.theme-dark {
  --bg: #0E1217;
  --surface: #161B22;
  --surface-2: #1D242E;
  --sel-bg: #1B2A44;
  --line: #2A3340;
  --line-strong: #637186;
  --canvas: #161B22;
  --scrim: rgba(0, 0, 0, 0.6);
  --ink: #E8EDF3;
  --ink-2: #B3BDC9;
  --ink-3: #8C98A6;
  --accent: #2563EB;
  --accent-hover: #2158D9;
  --on-accent: #FFFFFF;
  --link: #7AB0FF;
  --focus: #7AB0FF;
  --danger: #D92D20;
  --on-danger: #FFFFFF;
  --danger-text: #F28B8B;
  --decision-ink: #F2C14E;
  --decision-bg: #3A2E10;
  --trusted-ink: #6FD39A;
  --trusted-bg: #113524;
  --published-ink: #5ED3CD;
  --published-bg: #0F3432;
  --rejected-ink: #F28B8B;
  --rejected-bg: #3F1A1C;
  --escalated-ink: #BBA6F5;
  --escalated-bg: #2A2347;
  --running-ink: #7AB0FF;
  --running-bg: #15284A;
  --neutral-ink: #B3BDC9;
  --neutral-bg: #1D242E;
  --edge-known: #6B7888;
  --edge-decision: #E0A82E;
  --edge-trusted: #3FBF75;
  --edge-published: #38B8B2;
  --edge-rejected: #E06066;
  --edge-escalated: #9F86EA;
  --node-fill: #26303C;
  --node-stroke: #8C98A6;
  --focus-node: #7AB0FF;
  --bar-fill: #B3BDC9;
  --bar-empty: #2A3340;
  --code-bg: #0E1217;
  --code-hl-bg: #3A2E10;
  --toast-bg: #E8EDF3;
  --toast-ink: #16202B;
  --toast-link: #1D4ED8;
  --e-1: 0 4px 16px rgba(0, 0, 0, 0.5);
  --e-2: 0 16px 48px rgba(0, 0, 0, 0.6);
  color-scheme: dark;
}

/* Reduced motion: every duration collapses to zero; the shimmer becomes a static block. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-1: 0ms;
    --dur-2: 0ms;
    --dur-3: 0ms;
  }
}