/* ═══════════════════════════════════════════════════════════════════════════
   PKS control plane — the token layer.

   Dark-first: the bare :root carries the DARK palette, because that is the
   theme this interface is designed around. Light is a designed second theme,
   not an inversion, and it is reached two ways: the viewer's own preference
   when nothing is stamped, and an explicit data-theme on <html> when Ben has
   chosen. Both blocks redefine the same tokens and nothing else, so no colour
   has its only definition inside a media query.

   Green is the ACTION colour and the brand. It is never a status. The status
   lane keeps the meanings PKS already assigns them: blue is working, amber
   needs attention, purple is held by a session, red is blocked, grey is done.
   A status colour may be drawn as a word on a pale wash of ITSELF (a pill), up
   to the strongest --zt-*-soft below (16%): contrast.test.ts holds every status
   colour to 4.5:1 on that wash over all five backgrounds, in every palette. A
   stronger wash than the kit names is the app's own risk, and the guard will not
   know about it.

   The values are the ones the approved mockup carries
   (pks-control-plane-rebuild-design, decision 10 and the reference link).
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
  color-scheme: dark;

  --ground:      #0d100e;
  --sunken:      #090b0a;
  --surface:     #141816;
  --raised:      #1b201d;
  --column:      #101413;
  --line:        #262d29;
  --line-soft:   #1e2422;

  --text-strong: #f5f7f6;
  --text-body:   #cbd2ce;
  --text-muted:  #8e9793;
  --text-faint:  #646d69;
  --on-action:   #06140c;

  --action:      #1fae5a;
  --action-hi:   #2bc76a;
  --action-soft: rgba(31, 174, 90, .13);
  --action-line: rgba(31, 174, 90, .34);

  --st-doing:    #33b1ff;
  --st-attn:     #e8a317;
  --st-held:     #b086f8;
  --st-error:    #f4726a;
  --st-done:     #8ca094;
  /* Three lane colours the mockup does not carry but the board already uses:
     a dependency-gated card, an item at Build ready, and one In review. The
     review colour is its OWN hue rather than a shade of Build ready: they are
     adjacent columns and a reader tells them apart at a glance or not at all. */
  --st-gated:    #8e9dbb;
  --st-ready:    #0fbfa8;
  --st-review:   #e771bc;
  /* A ticket merged and waiting for the deploy session (PKS-1130). Its own hue
     again: it sits right beside In review and Needs you on the board. */
  --st-deploy:   #9ccc3d;

  --radius:   8px;
  --radius-s: 5px;
  --shadow:   0 10px 30px rgba(0, 0, 0, .45);

  --font: "Sofia Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;

    --ground:      #eef1ef;
    --sunken:      #e4e8e6;
    --surface:     #ffffff;
    --raised:      #ffffff;
    --column:      #f6f8f7;
    --line:        #d8ded9;
    --line-soft:   #e6ebe8;

    --text-strong: #10150f;
    --text-body:   #39423c;
    --text-muted:  #5b655f;
    --text-faint:  #8a938d;
    --on-action:   #ffffff;

    /* Light --action-hi is deliberately DARKER than --action: hover darkens in a light theme, and the brighter green
       it used to be missed 4.5:1 as white-on-fill and as link text. contrast.test.ts holds every text pair, in all
       three blocks, to 4.5:1, and the two light blocks to the same values. */
    --action:      #15803d;
    --action-hi:   #136d38;
    --action-soft: rgba(21, 128, 61, .10);
    --action-line: rgba(21, 128, 61, .30);

    --st-doing:    #095997;
    --st-attn:     #804a08;
    --st-held:     #673abc;
    --st-error:    #a3261f;
    --st-done:     #525a55;
    --st-gated:    #4b5877;
    --st-ready:    #076356;
    --st-review:   #97286d;
    --st-deploy:   #46600d;

    --shadow: 0 10px 26px rgba(16, 32, 24, .13);
  }
}

:root[data-theme="light"] {
  color-scheme: light;

  --ground:      #eef1ef;
  --sunken:      #e4e8e6;
  --surface:     #ffffff;
  --raised:      #ffffff;
  --column:      #f6f8f7;
  --line:        #d8ded9;
  --line-soft:   #e6ebe8;

  --text-strong: #10150f;
  --text-body:   #39423c;
  --text-muted:  #5b655f;
  --text-faint:  #8a938d;
  --on-action:   #ffffff;

  --action:      #15803d;
  --action-hi:   #136d38;
  --action-soft: rgba(21, 128, 61, .10);
  --action-line: rgba(21, 128, 61, .30);

  --st-doing:    #095997;
  --st-attn:     #804a08;
  --st-held:     #673abc;
  --st-error:    #a3261f;
  --st-done:     #525a55;
  --st-gated:    #4b5877;
  --st-ready:    #076356;
  --st-review:   #97286d;
  --st-deploy:   #46600d;

  --shadow: 0 10px 26px rgba(16, 32, 24, .13);
}

/* ── The bridge: the htm-era vocabulary, expressed in the new tokens ─────────
   The htm-era stylesheet was written against the old names (--surface-card,
   --zt-green, --border-subtle ...), and the rules that arrived from it
   verbatim still read them: the tail of src/styles/ui.css, the whole of
   src/styles/markdown.css and the warn toast in src/styles/shell.css. Every
   name resolves to a token above, so those rules follow both themes without a
   line changing. A room sheet reads the new names directly and never these.
   The last htm module went in 1.43.0 and this block stayed, because it
   serves those shared rules and not the module; it goes when they are
   rewritten against the tokens, which is a separate change from the
   conversion that moved them.

   A `var(--old, literal)` fallback is NOT a substitute for this: a fallback
   resolves silently when the name is missing and paints a light card on a
   dark surface with nothing reporting it. Defining every name is the point. */
:root {
  --font-sans: var(--font);
  --font-mono: var(--mono);
  --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600;
  --fw-bold: 700; --fw-extrabold: 800;

  --surface-page:   var(--ground);
  --surface-sunken: var(--sunken);
  --surface-card:   var(--surface);
  --surface-raised: var(--raised);
  --surface-column: var(--column);

  --text-reading: var(--text-body);
  --text-subtle:  var(--text-muted);
  --text-on-brand: var(--on-action);

  --zt-green:        var(--action);
  --zt-green-bright: var(--action-hi);
  --zt-green-deep:   var(--action);
  --zt-green-soft:   var(--action-soft);

  --zt-active:  var(--st-doing);
  --zt-idle:    var(--st-attn);
  --zt-planned: var(--st-held);
  --zt-error:   var(--st-error);
  --zt-retired: var(--st-done);
  --zt-gated:   var(--st-gated);
  --zt-ready:   var(--st-ready);
  --zt-review:  var(--st-review);
  --zt-deploy:  var(--st-deploy);
  --zt-active-soft:  color-mix(in srgb, var(--st-doing) 14%, transparent);
  --zt-idle-soft:    color-mix(in srgb, var(--st-attn) 14%, transparent);
  --zt-planned-soft: color-mix(in srgb, var(--st-held) 14%, transparent);
  --zt-error-soft:   color-mix(in srgb, var(--st-error) 13%, transparent);
  --zt-gated-soft:   color-mix(in srgb, var(--st-gated) 16%, transparent);

  /* The four ticket-LINK kinds (PKS-0621/PKS-0622): the Links section (PKS-1081),
     the board card's origin line and the Map's chips and legend all read
     these four names (web/src/rooms/board/connections.ts), never a status
     token directly -- the approved mockup happens to reuse the status
     palette's own hues, but the two vocabularies mean different things, and
     a status colour repainted for a new reason belongs behind its own name
     so the two can diverge later without a hunt through every reader. */
  --link-sub:   var(--st-doing);
  --link-block: var(--st-attn);
  --link-spawn: var(--st-held);
  --link-rel:   var(--st-ready);

  --border-subtle:  var(--line-soft);
  --border-faint:   var(--line-soft);
  --border-default: var(--line);
  --border-strong:  var(--action-line);
  /* Three names the old stylesheet read that its own :root never defined:
     the attachments drop zone rendered with no border and a transparent
     hover because of it. Defined here so the rule means what it says. */
  --text:      var(--text-body);
  --border:    var(--line);
  --bg-raised: var(--raised);

  --radius-xs: 4px; --radius-sm: 6px; --radius-md: 8px;
  --radius-col: 10px; --radius-lg: 12px; --radius-pill: 999px;

  --ease: cubic-bezier(.2, 0, .1, 1);
  --dur-fast: 120ms;

  --focus-ring:  0 0 0 3px var(--action-line);
  --glow-brand:  0 0 0 1px var(--action-line), 0 0 22px var(--action-soft);
  --glow-active: 0 0 8px color-mix(in srgb, var(--st-doing) 90%, transparent);
  --shadow-overlay: var(--shadow);
}