/* web/theme_b.css — [AGX1 theme-b-v1]
   Option 2 · Theme B (navy + indigo) from the Agents Page Redesign
   developer handoff (@jafar, 2026-09-30). Loaded AFTER app.css, this
   file swaps the app-wide palette by re-declaring the :root tokens the
   whole shell already routes through (app.css's own design: "the light
   theme in a later patch only swaps this block"), then corrects the
   handful of literal warm hexes app.css uses outside the variables.
   Layout, sizes and behaviour are untouched here — colors only.
   No hex values inside components: everything below is the Theme B
   token table from the handoff, verbatim. */

:root {
  /* ---- [BK1 graphite-tokens-v1] Dreamer UI Brand Kit · dark (graphite,
     default), @jafar 2026-10-03, section 2. Same token NAMES as Theme B —
     this file is the designed seam ("swaps the app-wide palette by
     re-declaring the :root tokens the whole shell already routes through"),
     so change report U1 lands as a value swap: graphite surfaces, the navy
     rail as the brand anchor, cobalt #3563FF reserved for action, lime
     #C6F24E for done/connected/live (never a button). Every pair below is
     the kit's own WCAG-AA-checked table; no new hex outside it. */
  --tb-bg:            #0C0E13;   /* bg · page charcoal            */
  --tb-bg-rail:       #0B1230;   /* rail · stays navy, both themes */
  --tb-bg-panel:      #121419;   /* panel · popovers, dialogs      */
  --tb-surface:       #15181F;   /* surface · cards, inputs        */
  --tb-surface-2:     #1D212A;   /* surface-2 · hover, chips       */
  --tb-border:        #242833;
  --tb-border-strong: #333946;   /* border-2 · inputs, outlines    */
  --tb-text:          #F4F6FA;
  --tb-text-secondary:#B3B8C3;   /* text-dim                       */
  --tb-text-muted:    #868C99;
  --tb-accent:        #3563FF;   /* primary · blue means act       */
  --tb-accent-text:   #9DB3FF;   /* links, accents                 */
  --tb-accent-soft:   rgba(53,99,255,0.12);   /* selected-fill     */
  --tb-accent-border: #5B82FF;   /* selected-border, focus ring    */
  --tb-success:       #C6F24E;   /* lime means done                */
  --tb-success-soft:  rgba(198,242,78,0.13);
  --tb-warning:       #F5B544;
  --tb-warning-soft:  rgba(245,181,68,0.13);
  --tb-danger:        #F2837A;
  --tb-danger-soft:   rgba(242,131,122,0.12);
  --tb-danger-fill:   #C73B3B;

  /* ---- [BK6 kit-tokens-v2] the brand-kit tokens BK1 left out (kit §2,
     §2.2, §2.3, §4.3, §22). Same source table, same names where the kit
     names them; everything below is verbatim kit values. */
  --tb-list:          #101217;   /* list columns (chat list, filters)  */
  --tb-surface-3:     #232733;   /* pressed, shimmer highlight, tooltip */
  --tb-border-hover:  #434A5A;   /* input and switch hover             */
  /* [CT1 contrast] was #737985 - 4.41:1 on bg, 4.06:1 on surface and
     3.69:1 on surface-2, i.e. below WCAG AA 4.5:1 on every dark surface it
     is actually used on. #8E95A4 is the same hue, raised to 6.42 / 5.91 /
     5.36:1. Light theme already passed (5.11-5.52:1) and is unchanged. */
  --tb-placeholder:   #8E95A4;   /* input placeholders                 */
  --tb-avatar:        #1A2A6B;   /* user avatar circle                 */
  --tb-rail-text:     #868C99;   /* rail labels; active = --tb-text    */
  --tb-accent-hover:  #C3D0FF;   /* link hover                         */
  --tb-primary-hover: #4A74FF;   /* primary button hover               */
  --tb-primary-press: #2A52E0;   /* primary button pressed             */
  --tb-success-text:  #C6F24E;   /* lime text on dark (light: #3F6B06) */
  --tb-warning-text:  #F5B544;   /* warning text (light: #9A5200)      */
  --tb-condition:     #7C9BFF;   /* workflow condition nodes           */
  --tb-lilac:         #B8A6FF;   /* loops, "Affected" (kit: NOT amber) */
  --tb-lilac-soft:    rgba(184,166,255,0.14);  /* lilac tint fill      */
  --tb-info-soft:     rgba(53,99,255,0.12);    /* info/selected tint   */
  --tb-scrim:         rgba(6,7,10,0.62);
  /* [TK1] elevations the kit does not name but the UI uses: a small float
     for pinned controls and accent glows. Added so that nothing outside the
     token block carries a raw rgba(). */
  --tb-shadow-float:  0 6px 18px rgba(0,0,0,0.35);
  --tb-glow-accent:   0 4px 14px rgba(53,99,255,0.35);
  --tb-glow-accent-sm:0 1px 3px rgba(53,99,255,0.25);
  --tb-ring-accent:   0 0 0 3px rgba(53,99,255,0.12);
  --tb-shadow-pop:    0 24px 60px rgba(0,0,0,0.55);
  --tb-shadow-dialog: 0 30px 80px rgba(0,0,0,0.6);
  /* [LT1 light-mode-fix] Text selection. The old rule set a background and no
     colour, so selected text kept its own colour: white label on the cobalt
     "New chat" button over a near-white selection fill = invisible. Both
     halves are now specified. A translucent fill was tried first but landed
     at 4.43:1 when text on the cobalt button was selected (the wash and the
     button resolved to the same blue); a SOLID light fill with dark ink is
     readable on every surface in both themes, so selection looks the same
     wherever it happens. */
  --tb-selection-bg:  #9DB3FF;
  --tb-selection-fg:  #0B1440;

  --tb-radius-input:  9px;
  --tb-radius-btn:    10px;
  --tb-radius-card:   14px;
  --tb-radius-pop:    16px;
  --tb-radius-dialog: 18px;
  /* [FT1 kit-3] Kit section 3 names the mono face per platform: Windows
     "Cascadia Mono" then Consolas, Apple "SF Mono", else ui-monospace.
     The old stack led with ui-monospace, which Chrome on Windows resolves
     to Consolas and so skipped Cascadia Mono entirely. Platform-specific
     faces come first; each is absent on the other platforms, so the stack
     naturally falls through to the right one. */
  --tb-font-mono:     "Cascadia Mono", "SF Mono", ui-monospace,
                      Consolas, "Liberation Mono", monospace;
  /* kit §2.3 status tints: borders at fixed alphas, same in both themes */
  --tb-success-tint-bd: rgba(198,242,78,0.35);
  --tb-warning-tint-bd: rgba(245,181,68,0.45);
  --tb-danger-tint-bd:  rgba(242,131,122,0.45);

  /* ---- remap of the shell's existing variables ---- */
  --bg:        var(--tb-bg);
  --dr-bg:      var(--tb-bg);
  --dr-surface: var(--tb-surface);
  --dr-border:  var(--tb-border);
  --dr-text:    var(--tb-text);
  --dr-dim:     var(--tb-text-secondary);
  --dr-faint:   var(--tb-text-muted);
  --dr-accent:  var(--tb-accent-text);
  /* [LT1 light-mode-fix] was var(--tb-bg-rail) — the rail token is the ONE
     colour that deliberately stays navy in BOTH themes, so inline <code> and
     <pre> kept a navy fill on the light page while their text inherited the
     dark page text: dark-on-dark, which rendered as solid black bars.
     surface-2 is the kit's own chip/raised fill and switches per theme.
     This also removes a kit violation in dark mode — section 21 Don't:
     "Tint cards, borders or backgrounds blue or navy (only the rail is navy)". */
  --dr-code-bg: var(--tb-surface-2);
  --panel:     var(--tb-bg-panel);
  --panel-2:   var(--tb-surface);
  --surface:   var(--tb-surface);
  --border:    var(--tb-border);
  --border-2:  var(--tb-border-strong);
  --text:      var(--tb-text);
  --dim:       var(--tb-text-secondary);
  --faint:     var(--tb-text-muted);
  --accent:    var(--tb-accent);
  --accent-ink:#ffffff;              /* primary button text: white, 5.2:1 */
  --good:      var(--tb-success);
  --bad:       var(--tb-danger);
  --user-bub:  var(--tb-surface-2);
}

/* [BK1 graphite-tokens-v1] the rail is the brand anchor and app.css paints
   it with a literal #100e0c — route it through the navy token (brand kit:
   "the rail stays navy in both themes"). Same selector-override technique
   as the warm hexes below; app.css stays byte-identical. */
#rail { background: var(--tb-bg-rail); }

/* [BK1] native system fonts (brand kit 3): SF Pro on Apple via
   -apple-system, Segoe UI Variable on Windows, the system font elsewhere.
   app.css starts its stack at "Segoe UI", which falls back to Helvetica on
   a Mac — this completes the stack without touching app.css. */
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text",
    "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* app.css literal warm hexes, re-expressed in Theme B. Selector-level
   overrides so app.css itself stays byte-identical (no pre-image risk). */
.rail-btn.active { background: var(--tb-accent-soft); color: var(--tb-accent-text); }
#ctxpill.on { background: var(--tb-accent-soft); }
.wfp-row.sel { background: var(--tb-accent-soft); border-color: var(--tb-accent-border); }
.agp-tabs button.on { background: var(--tb-accent-soft); }

/* accent-on-dark text roles: the filled primary keeps white ink; every
   ACCENT-AS-TEXT role (links, on-states, badges) uses the readable
   accent-text tint per the handoff. */
.wfp-badge.ed, .wf-sbadge { color: var(--tb-accent-text); border-color: var(--tb-accent-border); }
a { color: var(--tb-accent-text); }

/* status colors that were hard-coded green/red/amber in app.css */
.dot.on { background: var(--tb-success); }
.src-dot { }
::selection      { background: var(--tb-selection-bg); color: var(--tb-selection-fg); }
::-moz-selection { background: var(--tb-selection-bg); color: var(--tb-selection-fg); }

/* [AGX1b] composer chips (External / Analyse / Browser / Connect to
   device). app.css paints the lit state as brown #33270f + raw accent —
   muddy on the new surfaces. Lit = the Theme B selected state; the
   device chip's CONNECTED state reads success-green to match its dot. */
.chip { border-color: var(--tb-border-strong); color: var(--tb-text-muted); }
.chip:hover { color: var(--tb-text); border-color: var(--tb-accent-border); }
.chip.on { background: var(--tb-accent-soft); border-color: var(--tb-accent-border);
  color: var(--tb-accent-text); }
#chip-device.on { background: var(--tb-success-soft); border-color: var(--tb-success);
  color: var(--tb-success); }
#chip-device.busy { background: var(--tb-warning-soft); border-color: var(--tb-warning);
  color: var(--tb-warning); }

/* [BK5 control-truth-v1] boot/overrides.css ships the connector-card
   component (.dc-*), the connect-a-computer flow and the device chrome in
   the OLD warm palette — literal #d98a3d amber on every primary action.
   BK1's token swap exposed it (live screenshot 2026-10-04: amber "Save
   key" on the new Connectors page). Re-expressed on the tokens with the
   kit's meanings: BLUE means act (primary actions go cobalt), LIME means
   done (Configured/online states), amber stays for warnings only.
   Selector-level overrides; overrides.css stays byte-identical. */
.dc-card { background: var(--tb-surface); border-color: var(--tb-border); }
.dc-f { color: var(--tb-text-secondary); }
.dc-f input { background: var(--tb-surface-2); border-color: var(--tb-border-strong);
  color: var(--tb-text); }
.dc-f input:focus { border-color: var(--tb-accent-border); }
.dc-desc, .dc-empty, .dc-hint, .dc-panel-sub, .dc-linknote { color: var(--tb-text-muted); }
.dc-save { background: var(--tb-accent); color: #fff; }
.dc-save:hover { background: var(--tb-accent); filter: brightness(1.12); }
.dc-rm { color: var(--tb-danger); border-color: var(--tb-border-strong); }
.dc-rm:hover { background: var(--tb-danger-soft); }
.dc-badge { background: var(--tb-surface-2); color: var(--tb-text-muted); }
.dc-badge.on { background: var(--tb-success-soft); color: var(--tb-success); }
.dc-auth { background: var(--tb-surface-2); color: var(--tb-text-muted); }
.dc-tab { border-color: var(--tb-border-strong); color: var(--tb-text-muted); }
.dc-tab:hover { color: var(--tb-text); }
.dc-tab.active { background: var(--tb-accent-soft); color: var(--tb-accent-text);
  border-color: var(--tb-accent-border); }
.dc-stepn { background: var(--tb-accent); color: #fff; }
.dc-dl { background: var(--tb-accent); color: #fff; }
.dc-dl:hover { background: var(--tb-accent); filter: brightness(1.12); }
.dc-copy, .dc-ghost, .dev-acts button { border-color: var(--tb-border-strong);
  color: var(--tb-text-secondary); }
.dc-copy:hover, .dc-ghost:hover, .dev-acts button:hover {
  background: var(--tb-surface-2); color: var(--tb-text); }
.dc-astatus.checking, .dc-astatus.offline { background: var(--tb-surface-2);
  color: var(--tb-text-muted); }
.dc-astatus.online { background: var(--tb-success-soft); color: var(--tb-success); }
#dc-modal { background: var(--tb-bg-panel); color: var(--tb-text);
  border-color: var(--tb-border-strong); }
#dc-title, #dc-title + * { border-color: var(--tb-border); }
/* [TST1] The connector toast. --tb-success-soft / --tb-danger-soft are
   TRANSLUCENT (rgba ~13%), so the cards and buttons behind the toast showed
   through its text. The tint is now mixed into the panel colour, which gives
   the same hue but OPAQUE. Colour follows the meaning family used across the
   app: lime on dark, blue on light (light block further down); errors stay
   red in both. */
#dc-toast { background: color-mix(in srgb, #84cc16 13%, #14171f);
  color: #d9f99d; border-color: color-mix(in srgb, #84cc16 38%, transparent);
  box-shadow: 0 12px 28px -4px rgba(0, 0, 0, 0.45), 0 0 16px rgba(132, 204, 22, 0.16); }
#dc-toast .dc-toast-ico { width: 18px; height: 18px; flex: none; color: #a3e635; }
#dc-toast.bad { background: color-mix(in srgb, #ef4444 14%, #14171f);
  color: #fca5a5; border-color: color-mix(in srgb, #ef4444 40%, transparent);
  box-shadow: 0 12px 28px -4px rgba(0, 0, 0, 0.45), 0 0 16px rgba(239, 68, 68, 0.16); }
#dc-toast.bad .dc-toast-ico { color: #ef4444; }
.devchip { border-color: var(--tb-border-strong); color: var(--tb-text-secondary); }
.devchip:hover { background: var(--tb-surface-2); }
.devchip.tone-ok .devchip-dot { background: var(--tb-success); }
.devchip.tone-warn .devchip-dot { background: var(--tb-warning); }
.dev-name { color: var(--tb-text); }
.dev-st.online { color: var(--tb-success); }
.dev-st.revoked { color: var(--tb-danger); }

/* focus ring per the accessibility spec: 2px accent-border, 2px offset */
button:focus-visible, a:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--tb-accent-border);
  outline-offset: 2px;
}

/* [ux-selection-v1] the 12%-alpha accent-soft fill was invisible on the
   graphite page; selected text now uses the SOLID accent + white, the
   same pair the primary button already passes AA with (both themes
   share --tb-accent #3563FF). */
::selection { background: var(--tb-accent); color: #ffffff; }
::-moz-selection { background: var(--tb-accent); color: #ffffff; }

/* ======================================================================
   [BK6 light-theme-v1] Brand kit §18 + §22: the light theme, same token
   NAMES, different values, switched by data-theme on <html> (set before
   first paint by web/boot/theme.js; default is Match system). The rail
   and the sign-up brand panel stay navy in both themes; lime is never
   text on light (#3F6B06 instead); shadows get much lighter and borders
   do more of the separation. Values are the kit's own light table.    */
:root[data-theme="light"] {
  --tb-bg:            #F4F6FE;
  --tb-bg-rail:       #0A1440;   /* rail stays dark navy */
  --tb-bg-panel:      #F4F6FE;
  --tb-surface:       #FFFFFF;
  --tb-surface-2:     #EEF2FF;
  --tb-surface-3:     #E2E9FF;
  --tb-list:          #FFFFFF;
  --tb-border:        #DCE3F8;
  --tb-border-strong: #C7D2F2;
  --tb-border-hover:  #AEBBE6;
  --tb-text:          #0B1440;
  --tb-text-secondary:#3E4A6E;
  --tb-text-muted:    #5D6889;
  --tb-placeholder:   #5D6889;
  --tb-rail-text:     #A8B5E6;   /* on the navy rail */
  --tb-accent:        #3563FF;
  --tb-accent-text:   #2648D9;
  --tb-accent-hover:  #2648D9;
  --tb-accent-soft:   #E2E9FF;   /* selected-fill */
  --tb-selection-bg:  #BBD0FF;   /* [LT1] light selection fill */
  --tb-selection-fg:  #0B1440;   /* [LT1] dark ink on it      */
  --tb-accent-border: #3563FF;
  --tb-success:       #C6F24E;   /* fill stays lime */
  --tb-success-text:  #3F6B06;   /* lime is never text on light */
  --tb-success-soft:  rgba(198,242,78,0.13);
  --tb-warning:       #9A5200;
  --tb-warning-text:  #9A5200;
  --tb-warning-soft:  rgba(245,181,68,0.13);
  --tb-danger:        #C2352A;
  --tb-danger-soft:   rgba(242,131,122,0.12);
  --tb-danger-fill:   #C73B3B;
  --tb-condition:     #3358E0;
  --tb-lilac:         #5F3FE6;
  --tb-lilac-soft:    rgba(95,63,230,0.12);
  --tb-info-soft:     rgba(53,99,255,0.12);
  --tb-scrim:         rgba(14,20,50,0.26);
  --tb-shadow-float:  0 6px 18px rgba(16,24,48,0.12);   /* [TK1] light */
  --tb-glow-accent:   0 4px 14px rgba(53,99,255,0.28);
  --tb-glow-accent-sm:0 1px 3px rgba(53,99,255,0.20);
  --tb-ring-accent:   0 0 0 3px rgba(53,99,255,0.14);
  --tb-shadow-pop:    0 24px 60px rgba(16,24,48,0.10);
  --tb-shadow-dialog: 0 30px 80px rgba(16,24,48,0.12);
}

/* success/warning as TEXT route through the -text tokens so light stays
   readable; dark keeps the fill colours (identical values there). */
:root { --tb-success-ink: var(--tb-success-text); --tb-warning-ink: var(--tb-warning-text); }
:root[data-theme="light"] .dc-badge.on,
:root[data-theme="light"] .dc-astatus.online,
:root[data-theme="light"] .dev-st.online,
:root[data-theme="light"] #chip-device.on { color: var(--tb-success-text); }
/* [TST1] light: the connector toast is blue (lime is never legible on the
   light surface). --tb-accent-soft is a solid #E2E9FF here, so it is opaque.
   .bad must be restated: this selector outranks the plain #dc-toast.bad. */
:root[data-theme="light"] #dc-toast {
  background: color-mix(in srgb, #2563eb 8%, #ffffff);
  color: #1d4ed8;
  border-color: #bfdbfe;
  box-shadow: 0 12px 28px -4px rgba(37, 99, 235, 0.15), 0 2px 8px rgba(0, 0, 0, 0.05);
}
:root[data-theme="light"] #dc-toast .dc-toast-ico { color: #2563eb; }
:root[data-theme="light"] #dc-toast.bad {
  background: #fef2f2;
  color: #b91c1c;
  border-color: #fecaca;
  box-shadow: 0 12px 28px -4px rgba(239, 68, 68, 0.15), 0 2px 8px rgba(0, 0, 0, 0.05);
}
:root[data-theme="light"] #dc-toast.bad .dc-toast-ico { color: #dc2626; }

/* [BK6] kit §8 status pills — tinted fill + border + worded label, the
   same component both themes (only text colours change via tokens).
   Markup: <span class="bk-pill ok|warn|bad|info|neutral|affected">word</span> */
.bk-pill {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 12px; font-weight: 600; line-height: 1;
  padding: 4px 10px; border-radius: 999px;
  border: 1px solid var(--tb-border-strong);
  background: var(--tb-surface-2); color: var(--tb-text-secondary);
}
.bk-pill.ok      { background: rgba(198,242,78,0.13); border-color: var(--tb-success-tint-bd); color: var(--tb-success-ink); }
.bk-pill.warn    { background: rgba(245,181,68,0.13); border-color: var(--tb-warning-tint-bd); color: var(--tb-warning-ink); }
.bk-pill.bad     { background: rgba(242,131,122,0.12); border-color: var(--tb-danger-tint-bd); color: var(--tb-danger); }
.bk-pill.info    { background: var(--tb-info-soft); border-color: var(--tb-accent-border); color: var(--tb-accent-text); }
.bk-pill.affected{ background: var(--tb-lilac-soft); border-color: var(--tb-lilac); color: var(--tb-lilac); }
.bk-pill .bk-dot { width: 8px; height: 8px; border-radius: 999px; background: currentColor; }

/* [BK6] Settings → Appearance segmented toggle (kit §5: track surface +
   1px border, radius 10; active = selected-fill + accent text). */
#set-appearance .seg {
  display: inline-flex; gap: 2px; padding: 3px;
  background: var(--tb-surface); border: 1px solid var(--tb-border-strong);
  border-radius: 10px;
}
#set-appearance .seg button {
  height: 32px; padding: 0 14px; border: 0; border-radius: 8px;
  background: transparent; color: var(--tb-text-secondary);
  font-size: 13px; font-weight: 600; cursor: pointer;
}
#set-appearance .seg button.on {
  background: var(--tb-accent-soft); color: var(--tb-accent-text);
}

/* ======================================================================
   [LT1 light-mode-fix] Literal dark-page colours corrected onto tokens.

   Found by sweeping every stylesheet for a dark fill or near-white ink whose
   rule has no light-theme counterpart, so it applied in BOTH themes. 61 raw
   hits; theme_b already corrected most; these are the ones still landing a
   dark patch (or invisible text) on the light page.

   Deliberately NOT corrected: white ink on a filled cobalt/red button
   (.agx-btn.primary, .prjx .btn.primary, .dc-save, .wfx .btn-pri, ...) and
   #000 behind <img>/<video> letterboxes — those are right in both themes.

   Corrected here rather than at the source because this file is the designed
   seam for app.css / overrides.css literals and loads after both, which keeps
   app.css byte-identical (the convention BK1 established).
   boot/mobile.css loads AFTER this file, so its two are fixed in place there.
   ====================================================================== */

/* Workflow run controls — the hover fills were dark washes. */
.wf-stop:hover { background: var(--tb-danger-soft); }
.wf-pause:hover, .wf-resume:hover { background: var(--tb-surface-2); }

/* Connect-a-computer dialog + device rows (.dc-* / .dev-*). */
#dc-x:hover { background: var(--tb-surface-2); color: var(--tb-text); }
.dc-agent { background: var(--tb-surface); border-color: var(--tb-border); }
/* #c3c8d2 is a LIGHT grey: on the light page this text was invisible. */
.dc-steps li { color: var(--tb-text-secondary); }
.dev-badge { color: var(--tb-text-secondary); border-color: var(--tb-border-strong); }

/* [BRAND1] AiSockt brand-pack surfaces (aisockt-tokens.css --as-ink / --as-white).
   The logo GIFs are fully opaque on exactly these colours, so the logo tile in
   components/brand/brand.css uses them and shows no seam while the GIF loads.
   Same in both themes: they are the GIF files' own pixels, not theme colours. */
:root {
  --brand-ink: #0D1210;
  --brand-paper: #FFFFFF;
  --brand-lime-deep: #649C00;   /* --as-lime-deep: lime graphics on white (3.3:1) */
  /* [AUTH2] the logo's surface by theme: ink behind the dark GIF, white
     behind the light one. The sign-in brand panel is painted in it, so its
     text and check marks switch with it. */
  --brand-logo-tile: var(--brand-ink);
  --brand-fg: var(--white);
  --brand-check: var(--success);
}
:root[data-theme="light"] {
  --brand-logo-tile: var(--brand-paper);
  --brand-fg: var(--brand-ink);
  --brand-check: var(--brand-lime-deep);
}