/* Design tokens for the orchestration interface (spec §7.1-7.4).
 *
 * Every colour here was checked against its intended background at its
 * intended size: tests/test_ui_contrast.py fails the build if a foreground
 * token drops below the WCAG 2.2 AA ratio for that pairing, so a token cannot
 * be nudged for looks and quietly become unreadable.
 *
 * Colour is never the only signal — every status also carries text and a
 * shape (spec §6.7).
 */

:root {
  --bg-canvas: #090d11;
  --bg-rail: #0b1015;
  --bg-surface: #0f151b;
  --bg-surface-raised: #121a21;
  --bg-hover: #16202a;
  --bg-sunken: #070a0d;

  --border-subtle: #25313b;
  --border-strong: #354552;

  --text-primary: #f2f5f7;
  --text-secondary: #b6c0c9;
  --text-muted: #8e99a3;

  --accent-blue: #5b9cf8;
  --accent-green: #46c96b;
  --accent-amber: #f5b51b;
  --accent-red: #ff6b6b;
  --accent-purple: #c08cf7;
  --focus-ring: #7fb4ff;

  /* Ink for text painted ON an accent fill (primary button, bell badge). It
     flips with the palette: dark ink on the pale dark-theme accents, white on
     the deep light-theme ones. A hard-coded colour passes in one and fails in
     the other. */
  --on-accent: #04101f;

  /* Tinted backgrounds for status rows: low-alpha so text keeps its ratio. */
  --tint-blue: rgba(91, 156, 248, 0.10);
  --tint-green: rgba(70, 201, 107, 0.10);
  --tint-amber: rgba(245, 181, 27, 0.10);
  --tint-red: rgba(255, 107, 107, 0.10);
  --tint-purple: rgba(192, 140, 247, 0.10);

  --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
    "Liberation Mono", monospace;

  --step-1: 4px;
  --step-2: 8px;
  --step-3: 12px;
  --step-4: 16px;
  --step-5: 24px;
  --step-6: 32px;

  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;

  --rail-width: 216px;
  --rail-width-collapsed: 60px;
  --header-height: 56px;
  --statusbar-height: 36px;
}

/* Light palette (DESIGN.md): flat cool-grey paper, ink text, one signal blue.
 * `system` follows the viewer's OS setting; `light` is the explicit choice.
 * The dark :root above stays first in the file because the contrast tests read
 * the first definition of each token.
 *
 * ponytail: CSS cannot share one block between a media query and an attribute
 * selector, so the values are written twice. test_ui_contrast.py asserts the
 * two stay equal; a build step that emits both is the upgrade if it drifts. */
@media (prefers-color-scheme: light) {
  :root[data-theme="system"] {
    --bg-canvas: #ecede9;
    --bg-rail: #e4e5e1;
    --bg-surface: #f4f5f2;
    --bg-surface-raised: #fafaf8;
    --bg-hover: #dfe1dc;
    --bg-sunken: #e1e2de;

    --border-subtle: #c6c9c2;
    --border-strong: #6f776f;

    --text-primary: #14181c;
    --text-secondary: #3d464e;
    --text-muted: #59636c;

    --accent-blue: #1d3fdd;
    --accent-green: #1b6b34;
    --accent-amber: #7a5200;
    --accent-red: #b3261e;
    --accent-purple: #6b3fb0;
    --focus-ring: #1d3fdd;
    --on-accent: #ffffff;

    --tint-blue: rgba(29, 63, 221, 0.08);
    --tint-green: rgba(27, 107, 52, 0.10);
    --tint-amber: rgba(122, 82, 0, 0.10);
    --tint-red: rgba(179, 38, 30, 0.08);
    --tint-purple: rgba(107, 63, 176, 0.08);
  }
}

:root[data-theme="light"] {
  --bg-canvas: #ecede9;
  --bg-rail: #e4e5e1;
  --bg-surface: #f4f5f2;
  --bg-surface-raised: #fafaf8;
  --bg-hover: #dfe1dc;
  --bg-sunken: #e1e2de;

  --border-subtle: #c6c9c2;
  --border-strong: #6f776f;

  --text-primary: #14181c;
  --text-secondary: #3d464e;
  --text-muted: #59636c;

  --accent-blue: #1d3fdd;
  --accent-green: #1b6b34;
  --accent-amber: #7a5200;
  --accent-red: #b3261e;
  --accent-purple: #6b3fb0;
  --focus-ring: #1d3fdd;
  --on-accent: #ffffff;

  --tint-blue: rgba(29, 63, 221, 0.08);
  --tint-green: rgba(27, 107, 52, 0.10);
  --tint-amber: rgba(122, 82, 0, 0.10);
  --tint-red: rgba(179, 38, 30, 0.08);
  --tint-purple: rgba(107, 63, 176, 0.08);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg-canvas);
  color: var(--text-primary);
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

body { min-height: 100vh; }

h1, h2, h3 { margin: 0; font-weight: 600; }
h1 { font-size: 22px; }
h2 { font-size: 16px; }
h3 { font-size: 14px; }

a { color: var(--accent-blue); }
a:focus-visible,
button:focus-visible,
select:focus-visible,
input:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

code, .mono, .tech { font-family: var(--font-mono); font-size: 12.5px; }

.num { font-variant-numeric: tabular-nums; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Motion is decorative here and is removed entirely on request (spec §31.5). */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}