/* ═══════════════════════════════════════════════════════════════════════════
   Mergestro control plane — THE TRACE
   ═══════════════════════════════════════════════════════════════════════════

   The world is an observatory chart recorder. One pen per repo on a shared time
   axis; quiet is a flat line; an event is an excursion with real amplitude.
   That is not decoration — it is PRODUCT.md's own argument for why this plane
   exists: retention, disable-rate and red-mains-prevented "only exist as trends
   across repos over calendar time", which a single CI runner structurally
   cannot see. A gate somebody switched off is a flatline. Nothing else shows it.

   THE LOAD-BEARING INVERSION: the chrome is dark and the DATA is lit. Housing,
   rail and controls are graphite instrument casing; the only bright surfaces on
   screen are strips of chart paper carrying real data. Inverting this — pale
   chrome with dark data panels — collapses the surface back into the dark-SaaS
   dashboard this replaced, and is a regression, not a preference.

   Replaces the AWOL Ninja token set that was imported verbatim from a different
   product. Legacy token NAMES are kept so the render layer keeps working; every
   value is new. Values are HSL channel triplets consumed as hsl(var(--token)).

   Self-contained on purpose: no @import, no webfont, no CDN. The previous set
   pulled faces from fonts.googleapis.com, which degrades on exactly the
   air-gapped self-host an ELv2 licence invites. Operate surfaces are explicitly
   allowed familiar system sans, so this costs nothing and buys the air gap back.

   Structure follows the file it replaces: :root is the light reading mode and
   [data-theme="dark"] is the console default the app boots into.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Light: the lab bench. Housing goes pale, paper stays paper, and the trace
      never changes what its colours mean. ─────────────────────────────────── */
:root {
  --bg-page: 40 20% 93%;
  --background: 40 20% 93%;
  --housing: 40 20% 93%;
  --housing-raised: 40 24% 97%;
  --card: 40 30% 97%;
  --card-2: 40 22% 92%;
  --card-3: 40 18% 87%;
  --border: 40 14% 82%;
  --border-strong: 40 12% 66%;
  --input: 40 24% 97%;

  /* Chart paper — the lit surface. Data lives here and nothing else does. */
  --paper: 40 42% 97%;
  --paper-ruled: 40 30% 92%;
  --paper-edge: 40 18% 76%;
  --rule: 17 62% 44%;
  --rule-soft: 17 40% 66%;
  --ink: 224 14% 14%;

  --foreground: 224 14% 14%;
  --fg-soft: 224 10% 30%;
  --muted-foreground: 224 8% 40%;
  --muted-2: 224 6% 56%;
  --muted: 40 22% 92%;

  /* Semantic state. Every one of these is paired with a glyph or a word in the
     components — never carried by hue alone. */
  --pass: 151 48% 30%;
  --alarm: 4 68% 44%;
  --degraded: 33 78% 34%;
  --quiet: 224 6% 46%;

  --primary: 17 62% 40%;
  --primary-foreground: 40 33% 96%;
  --accent: 40 22% 92%;
  --accent-foreground: 224 14% 14%;
  --accent-soft: 17 62% 40%;
  --secondary: 40 22% 92%;
  --secondary-foreground: 224 14% 14%;
  --ring: 17 62% 40%;

  --success: 151 48% 30%;
  --success-foreground: 40 33% 96%;
  --warning: 33 78% 34%;
  --warning-foreground: 40 33% 96%;
  --destructive: 4 68% 44%;
  --destructive-foreground: 40 33% 96%;
  --info: 202 60% 34%;
  --kill: 4 68% 44%;

  --shadow-panel: 0 1px 2px hsl(40 20% 40% / 0.14), 0 4px 12px hsl(40 20% 40% / 0.1);
  --shadow-pop: 0 2px 6px hsl(40 20% 40% / 0.18), 0 12px 32px hsl(40 20% 40% / 0.14);
}

/* ── Dark: the reading room. This is what the console boots into. ─────────── */
.dark,
[data-theme="dark"] {
  --bg-page: 224 9% 8%;
  --background: 224 9% 8%;
  --housing: 224 9% 8%;
  --housing-raised: 220 8% 13%;
  --card: 220 8% 12%;
  --card-2: 220 7% 16%;
  --card-3: 220 7% 20%;
  --border: 220 6% 20%;
  --border-strong: 220 6% 30%;
  --input: 220 7% 16%;

  /* The chart surface follows the theme. An earlier build kept it as literal
     light paper on the dark housing — "the data is the only lit thing" — and it
     read as a pair of bright slabs someone has to stare at all shift. In dark
     mode the roll is a raised dark panel and the pen draws in light ink: the
     trace is still the brightest thing in its own strip, without lighting up a
     third of the screen. Time rules stay the chart-paper orange either way. */
  --paper: 220 8% 15%;
  --paper-ruled: 220 8% 18%;
  --paper-edge: 220 6% 27%;
  --rule: 17 52% 44%;
  --rule-soft: 17 38% 52%;
  --ink: 41 14% 86%;

  --foreground: 41 13% 84%;
  --fg-soft: 40 9% 72%;
  --muted-foreground: 38 7% 62%;
  --muted-2: 36 6% 44%;
  --muted: 220 7% 16%;

  --pass: 151 40% 48%;
  --alarm: 4 66% 60%;
  --degraded: 38 68% 54%;
  --quiet: 38 6% 50%;

  --primary: 17 62% 56%;
  --primary-foreground: 224 9% 8%;
  --accent: 220 7% 16%;
  --accent-foreground: 41 13% 84%;
  --accent-soft: 17 62% 56%;
  --secondary: 220 7% 16%;
  --secondary-foreground: 41 13% 84%;
  --ring: 17 62% 60%;

  --success: 151 40% 48%;
  --success-foreground: 224 9% 8%;
  --warning: 38 68% 54%;
  --warning-foreground: 224 9% 8%;
  --destructive: 4 66% 60%;
  --destructive-foreground: 224 9% 8%;
  --info: 197 45% 58%;
  --kill: 4 66% 60%;

  --shadow-panel: 0 1px 2px hsl(224 12% 4% / 0.5), 0 4px 12px hsl(224 12% 4% / 0.35);
  --shadow-pop: 0 2px 6px hsl(224 12% 4% / 0.55), 0 12px 32px hsl(224 12% 4% / 0.45);
}

/* ── Type ─────────────────────────────────────────────────────────────────────
   Operate wants ONE family and a FIXED rem scale: users sit at a constant DPI,
   and a clamp-sized heading that shrinks inside a panel looks worse, not better.
   Ratio ~1.15 — a console has many type elements and exaggerated contrast reads
   as noise. The serif display face the old set used is gone: a display face in
   product UI is a costume, and this surface has no room for one. */
:root {
  /* Proper family names are quoted, generic families (sans-serif, monospace,
     ui-sans-serif, system-ui) are not. That is the CSS distinction, it matches the
     multi-word names already quoted here, and it keeps `value-keyword-case` off
     names that are not keywords — lowercasing "Arial" to satisfy that rule would
     be the wrong repair. */
  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", "Roboto",
    "Helvetica Neue", "Arial", sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", "JetBrains Mono",
    "Consolas", "Liberation Mono", monospace;
  /* Kept so any stale reference resolves to the UI face rather than a serif. */
  --font-serif: var(--font-sans);
  --font-display: var(--font-sans);

  --display-tracking: -0.01em;
  --display-weight: 600;

  --t-xs: 11px;
  --t-sm: 12px;
  --t-base: 13px;
  --t-md: 15px;
  --t-lg: 18px;
  --t-xl: 22px;
  --t-2xl: 28px;

  /* Legacy names, remapped onto the ramp above. */
  --text-display-xl: var(--t-2xl);
  --text-display-lg: var(--t-2xl);
  --text-display-md: var(--t-xl);
  --text-display-sm: var(--t-lg);
  --text-h2: var(--t-md);
  --text-h3: var(--t-base);
  --text-body: var(--t-base);
  --text-sm: var(--t-sm);
  --text-xs: var(--t-xs);
  --eyebrow-tracking: 0.08em;

  --lh-tight: 1.25;
  --lh-body: 1.55;
}

/* ── Space, shape, motion ─────────────────────────────────────────────────────
   Instruments are not pill-shaped and a chart roll is square-cut, so the radii
   are small. Both elevations carry a real offset and blur — a zero-offset
   coloured halo is decoration, not depth. Transitions stay at 120–180ms: the
   user is in a task, not watching choreography. */
:root {
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 24px; --s6: 32px; --s7: 48px;

  --space-1: var(--s1); --space-2: var(--s2); --space-3: var(--s3);
  --space-4: var(--s4); --space-5: 20px;      --space-6: var(--s5);
  --space-8: var(--s6); --space-12: var(--s7);

  --r-sm: 2px;
  --r-md: 4px;
  --r-lg: 6px;
  --radius: var(--r-lg);
  --radius-lg: var(--r-lg);
  --radius-md: var(--r-md);
  --radius-sm: var(--r-sm);
  --radius-pill: 999px;

  --shadow-sm: var(--shadow-panel);
  --shadow-md: var(--shadow-panel);
  --shadow-lg: var(--shadow-pop);
  --shadow-fab: var(--shadow-pop);

  --ease: cubic-bezier(0.2, 0.8, 0.3, 1);
  --ease-standard: var(--ease);
  --dur-fast: 120ms;
  --dur: 180ms;
  --dur-med: 180ms;
}

@keyframes awol-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.4; }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}