/* ============================================================================
 * Deckard — theme.css
 * THE PALETTE (spec §11). Amber-phosphor terminal on black.
 *
 * HARD RULE (§11, §18): FOUR COLOR TOKENS. NOTHING ELSE.
 *   --amber      base    : agent output, chrome, borders, headers, cursor
 *   --amber-dim  idle    : secondary text, timestamps  (INTENSITY carries state)
 *   --cyan       info    : user input, tool INPUTS, thinking, drawers, links,
 *                          added diff lines, "in progress"
 *   --red        danger  : errors, permission-required, destructive tools,
 *                          denials, failed tasks, removed diff lines, conflicts
 * plus the two surfaces: --bg (#0A0A0A) and --surface (#14110C).
 *
 * SEMANTIC RULE: one color = one meaning. There is NO fifth hue. A new state is
 * expressed with amber INTENSITY or with motion (motion.css) — never a new color.
 * The single exception is the §19 opt-in `green-red` diff flip, which is gated
 * behind [data-diff-colors="green-red"] and is off by default.
 *
 * Layer order:  theme.css  ->  motion.css  ->  components.css
 * ==========================================================================*/

/* ---------------------------------------------------------------- tokens - */
:root {
  /* ---- THE FOUR (+2 surfaces). Do not add to this block. ---- */
  --bg: #0a0a0a;
  --surface: #14110c;
  /* Amber phosphor, oranger than the textbook #FFB000 — that value is technically "amber" but
     reads yellow on an LCD, where a real P3 CRT glowed closer to burnt orange. Everything else
     (borders, hovers, fills, glow) is derived from --amber-rgb, so shifting the hue here shifts
     the whole chrome with it. */
  --amber: #ff8f1f;
  --amber-dim: #8a4f14;
  --cyan: #2bd9c4;
  --red: #ff453a;

  /* Channel triplets of the SAME four colors, so alpha variants (borders,
     hovers, fills) never require a new hue. rgb(var(--amber-rgb) / 12%). */
  --bg-rgb: 10 10 10;
  --surface-rgb: 20 17 12;
  --amber-rgb: 255 143 31;
  --amber-dim-rgb: 138 79 20;
  --cyan-rgb: 43 217 196;
  --red-rgb: 255 69 58;

  /* ---- Semantic aliases (all resolve to one of the four) ---- */
  --fg: var(--amber);              /* default agent/body text */
  --fg-dim: var(--amber-dim);      /* idle / secondary / timestamps */
  --fg-user: var(--cyan);          /* user input */
  --fg-danger: var(--red);

  --border: rgb(var(--amber-dim-rgb) / 42%);
  --border-strong: rgb(var(--amber-rgb) / 55%);
  --border-info: rgb(var(--cyan-rgb) / 45%);
  --border-danger: rgb(var(--red-rgb) / 62%);

  /* SURFACES — a near-black grey ladder, so panels read as separate SLABS instead of everything
     floating on one flat void with only a hairline between them. Each step is a real, slightly
     lighter grey rather than an amber tint, so the elevation cue never competes with the four
     semantic hues (§11): grey says "this is a different surface", amber/cyan/red still say what
     something MEANS. */
  --surface-1: #101010;   /* tab bar, top bar, footer, composer chrome */
  --surface-2: #161616;   /* raised: cards, lanes, rails, the settings panel */
  --surface-3: #1c1c1c;   /* the active tab, hovered rows — the top of the stack */

  --raised: var(--surface-2);
  --raised-2: #131313;    /* a hair above the page, under a card */
  --hover: rgb(var(--amber-rgb) / 9%);
  --active: rgb(var(--amber-rgb) / 15%);
  --selection: rgb(var(--amber-rgb) / 25%);

  /* ---- Typography (§11: monospace throughout, minimum 11px) ---- */
  --font-mono: ui-monospace, "Cascadia Mono", "JetBrains Mono", "Fira Mono",
    "SF Mono", Menlo, Consolas, "DejaVu Sans Mono", monospace;
  --fs-micro: 11px;   /* the floor. never go below this. */
  --fs-small: 12px;
  --fs-base: 13px;
  --fs-lg: 15px;
  --fs-xl: 18px;
  --lh: 1.5;
  --tracking: 0.02em;

  /* ---- Geometry ---- */
  --rail-w: 46px;                 /* §9 collapsed lane rail */
  --lane-min-w: 320px;
  --radius: 3px;                  /* terminal, not rounded-app */
  --radius-lg: 5px;
  --gap: 8px;
  --pad: 10px;
  --topbar-h: 38px;
  --tabbar-h: 34px;
  --filemap-h: 30px;
  --footer-h: 28px;

  /* ---- Phosphor bloom (§11: SUBTLE. readability over spectacle). ----
     --glow-strength is scaled at runtime by js/theme.js from the §19
     glowIntensity config (0 = off, 1 = default, 2 = max). */
  --glow-strength: 1;
  --glow: 0 0 calc(6px * var(--glow-strength)) rgb(var(--amber-rgb) / calc(0.30 * var(--glow-strength)));
  --glow-cyan: 0 0 calc(6px * var(--glow-strength)) rgb(var(--cyan-rgb) / calc(0.30 * var(--glow-strength)));
  --glow-red: 0 0 calc(6px * var(--glow-strength)) rgb(var(--red-rgb) / calc(0.34 * var(--glow-strength)));
  --glow-box: 0 0 calc(10px * var(--glow-strength)) rgb(var(--amber-rgb) / calc(0.14 * var(--glow-strength)));
  --glow-box-cyan: 0 0 calc(10px * var(--glow-strength)) rgb(var(--cyan-rgb) / calc(0.14 * var(--glow-strength)));
  --glow-box-red: 0 0 calc(12px * var(--glow-strength)) rgb(var(--red-rgb) / calc(0.20 * var(--glow-strength)));

  /* ---- Motion (see motion.css) ---- */
  --t-fast: 120ms;
  --t: 200ms;                     /* §11: state changes transition ~200ms */
  --ease: cubic-bezier(0.2, 0.6, 0.3, 1);

  /* ---- Diff colors (§19 flippable). Default: removed RED, added CYAN. ---- */
  --diff-add: var(--cyan);
  --diff-add-rgb: var(--cyan-rgb);
  --diff-del: var(--red);
  --diff-del-rgb: var(--red-rgb);

  color-scheme: dark;
}

/* §19 opt-in ONLY: conventional green/red diffs. This is the one place a hue
   outside the four is permitted, and only because the user asked for it. */
:root[data-diff-colors="green-red"] {
  --diff-add: #2ea043;
  --diff-add-rgb: 46 160 67;
  --diff-del: var(--red);
  --diff-del-rgb: var(--red-rgb);
}

/* Glow intensity steps set by js/theme.js (it also sets --glow-strength
   directly; these are the declarative fallback). */
:root[data-glow="0"] { --glow-strength: 0; }
:root[data-glow="1"] { --glow-strength: 1; }
:root[data-glow="2"] { --glow-strength: 2; }

/* ------------------------------------------------------------------ base - */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  margin: 0;
}

body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-mono);
  font-size: var(--fs-base);
  line-height: var(--lh);
  letter-spacing: var(--tracking);
  font-variant-ligatures: none;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;             /* the shell scrolls its panes, not the page */
}

/* Monospace THROUGHOUT — nothing inherits a proportional face, ever. */
body,
button,
input,
select,
textarea,
code,
pre,
kbd,
samp,
h1, h2, h3, h4, h5, h6,
.btn,
.form-control,
.form-select,
.nav-link,
.modal,
.dropdown-menu,
.badge,
.alert {
  font-family: var(--font-mono);
}

h1, h2, h3, h4, h5, h6 {
  color: var(--amber);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-shadow: var(--glow);
  margin: 0;
}
h1 { font-size: var(--fs-xl); }
h2 { font-size: var(--fs-lg); }
h3, h4, h5, h6 { font-size: var(--fs-base); }

a,
.link {
  color: var(--cyan);                 /* §11: links are cyan (structural/info) */
  text-decoration: none;
  border-bottom: 1px dotted rgb(var(--cyan-rgb) / 55%);
  transition: color var(--t) var(--ease), text-shadow var(--t) var(--ease);
}
a:hover,
.link:hover {
  color: var(--cyan);
  text-shadow: var(--glow-cyan);
  border-bottom-color: var(--cyan);
}

code, pre, kbd, samp { font-size: var(--fs-small); color: inherit; }
pre { margin: 0; white-space: pre-wrap; word-break: break-word; }

hr { border: 0; border-top: 1px solid var(--border); opacity: 1; margin: var(--gap) 0; }

::selection { background: var(--selection); color: var(--amber); }

:focus-visible {
  outline: 1px solid var(--amber);
  outline-offset: 1px;
  box-shadow: var(--glow-box);
}

/* Scrollbars — amber-dim, thin, no grey. */
* {
  scrollbar-width: thin;
  scrollbar-color: rgb(var(--amber-dim-rgb) / 70%) transparent;
}
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: rgb(var(--amber-dim-rgb) / 60%);
  border-radius: var(--radius);
}
*::-webkit-scrollbar-thumb:hover { background: rgb(var(--amber-rgb) / 60%); }
*::-webkit-scrollbar-corner { background: transparent; }

/* ------------------------------------------------------- text utilities - */
.t-amber   { color: var(--amber); }
.t-dim     { color: var(--amber-dim); }
.t-cyan    { color: var(--cyan); }
.t-red     { color: var(--red); }
.t-mono    { font-family: var(--font-mono); }
.t-micro   { font-size: var(--fs-micro); }
.t-small   { font-size: var(--fs-small); }
.t-upper   { text-transform: uppercase; letter-spacing: 0.08em; }
.t-trunc   { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Phosphor bloom. Bright text only — dim text must NOT glow (§11 guardrail). */
.glow      { text-shadow: var(--glow); }
.glow-cyan { text-shadow: var(--glow-cyan); }
.glow-red  { text-shadow: var(--glow-red); }

.surface {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

/* Timestamps / metadata: always dim, always micro, never glowing. */
.ts,
.meta {
  color: var(--amber-dim);
  font-size: var(--fs-micro);
  text-shadow: none;
}

/* ==========================================================================
 * BOOTSTRAP OVERRIDES
 * Bootstrap ships blue/green/grey and WILL fight this theme. Everything below
 * exists to make sure none of its default hues ever reach a pixel (§18).
 * ==========================================================================*/
:root,
[data-bs-theme="dark"] {
  --bs-body-bg: var(--bg);
  --bs-body-bg-rgb: var(--bg-rgb);
  --bs-body-color: var(--amber);
  --bs-body-color-rgb: var(--amber-rgb);
  --bs-body-font-family: var(--font-mono);
  --bs-body-font-size: var(--fs-base);
  --bs-body-line-height: var(--lh);

  --bs-emphasis-color: var(--amber);
  --bs-secondary-color: var(--amber-dim);
  --bs-tertiary-color: var(--amber-dim);
  --bs-secondary-bg: var(--surface);
  --bs-tertiary-bg: var(--surface);

  --bs-border-color: rgb(var(--amber-dim-rgb) / 42%);
  --bs-border-color-translucent: rgb(var(--amber-dim-rgb) / 30%);
  --bs-border-radius: var(--radius);
  --bs-border-radius-sm: var(--radius);
  --bs-border-radius-lg: var(--radius-lg);
  --bs-border-radius-xl: var(--radius-lg);
  --bs-border-radius-pill: var(--radius-lg);

  /* Every Bootstrap semantic color is collapsed onto the four. */
  --bs-primary: var(--amber);
  --bs-primary-rgb: var(--amber-rgb);
  --bs-primary-text-emphasis: var(--amber);
  --bs-primary-bg-subtle: rgb(var(--amber-rgb) / 12%);
  --bs-primary-border-subtle: rgb(var(--amber-rgb) / 45%);

  --bs-secondary: var(--amber-dim);
  --bs-secondary-rgb: var(--amber-dim-rgb);
  --bs-secondary-text-emphasis: var(--amber-dim);
  --bs-secondary-bg-subtle: rgb(var(--amber-dim-rgb) / 12%);
  --bs-secondary-border-subtle: rgb(var(--amber-dim-rgb) / 40%);

  /* success/info both map to CYAN — "in progress"/informational (§11). */
  --bs-success: var(--cyan);
  --bs-success-rgb: var(--cyan-rgb);
  --bs-success-text-emphasis: var(--cyan);
  --bs-success-bg-subtle: rgb(var(--cyan-rgb) / 12%);
  --bs-success-border-subtle: rgb(var(--cyan-rgb) / 45%);

  --bs-info: var(--cyan);
  --bs-info-rgb: var(--cyan-rgb);
  --bs-info-text-emphasis: var(--cyan);
  --bs-info-bg-subtle: rgb(var(--cyan-rgb) / 12%);
  --bs-info-border-subtle: rgb(var(--cyan-rgb) / 45%);

  /* warning -> amber (state, not danger); danger -> red. */
  --bs-warning: var(--amber);
  --bs-warning-rgb: var(--amber-rgb);
  --bs-warning-text-emphasis: var(--amber);
  --bs-warning-bg-subtle: rgb(var(--amber-rgb) / 12%);
  --bs-warning-border-subtle: rgb(var(--amber-rgb) / 45%);

  --bs-danger: var(--red);
  --bs-danger-rgb: var(--red-rgb);
  --bs-danger-text-emphasis: var(--red);
  --bs-danger-bg-subtle: rgb(var(--red-rgb) / 12%);
  --bs-danger-border-subtle: rgb(var(--red-rgb) / 50%);

  --bs-light: var(--amber);
  --bs-light-rgb: var(--amber-rgb);
  --bs-dark: var(--surface);
  --bs-dark-rgb: var(--surface-rgb);

  --bs-link-color: var(--cyan);
  --bs-link-color-rgb: var(--cyan-rgb);
  --bs-link-hover-color: var(--cyan);
  --bs-link-hover-color-rgb: var(--cyan-rgb);

  --bs-code-color: var(--cyan);
  --bs-highlight-bg: rgb(var(--amber-rgb) / 22%);

  --bs-focus-ring-color: rgb(var(--amber-rgb) / 40%);
  --bs-focus-ring-width: 1px;
  --bs-focus-ring-opacity: 1;

  --bs-heading-color: var(--amber);
}

/* --- buttons: outline terminal keys, never filled blue --- */
.btn {
  --bs-btn-font-size: var(--fs-small);
  --bs-btn-padding-y: 3px;
  --bs-btn-padding-x: 10px;
  --bs-btn-border-radius: var(--radius);
  --bs-btn-font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--amber-dim);
  transition: color var(--t) var(--ease), border-color var(--t) var(--ease),
    background-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.btn:hover,
.btn:focus-visible {
  background: var(--hover);
  border-color: var(--amber);
  color: var(--amber);
  text-shadow: var(--glow);
  box-shadow: var(--glow-box);
}
.btn:active,
.btn.active,
.btn:first-child:active {
  background: var(--active);
  border-color: var(--amber);
  color: var(--amber);
}
.btn:disabled,
.btn.disabled {
  background: transparent;
  border-color: rgb(var(--amber-dim-rgb) / 30%);
  color: rgb(var(--amber-dim-rgb) / 60%);
  opacity: 1;
  box-shadow: none;
  text-shadow: none;
}

/* Bootstrap's colored variants, re-pointed at the palette. Same rules apply:
   -primary/-warning = amber, -info/-success = cyan, -danger = red, else dim. */
.btn-primary,
.btn-warning,
.btn-outline-primary,
.btn-outline-warning,
.btn-light,
.btn-outline-light {
  background: transparent;
  border-color: var(--amber);
  color: var(--amber);
}
.btn-primary:hover,
.btn-warning:hover,
.btn-outline-primary:hover,
.btn-outline-warning:hover,
.btn-light:hover,
.btn-outline-light:hover {
  background: var(--active);
  border-color: var(--amber);
  color: var(--amber);
  box-shadow: var(--glow-box);
}

.btn-info,
.btn-success,
.btn-outline-info,
.btn-outline-success {
  background: transparent;
  border-color: var(--cyan);
  color: var(--cyan);
}
.btn-info:hover,
.btn-success:hover,
.btn-outline-info:hover,
.btn-outline-success:hover {
  background: rgb(var(--cyan-rgb) / 14%);
  border-color: var(--cyan);
  color: var(--cyan);
  text-shadow: var(--glow-cyan);
  box-shadow: var(--glow-box-cyan);
}

.btn-danger,
.btn-outline-danger,
.btn.danger {
  background: transparent;
  border-color: var(--red);
  color: var(--red);
}
.btn-danger:hover,
.btn-outline-danger:hover,
.btn.danger:hover {
  background: rgb(var(--red-rgb) / 16%);
  border-color: var(--red);
  color: var(--red);
  text-shadow: var(--glow-red);
  box-shadow: var(--glow-box-red);
}

.btn-secondary,
.btn-outline-secondary,
.btn-dark,
.btn-outline-dark,
.btn-link {
  background: transparent;
  border-color: var(--border);
  color: var(--amber-dim);
}
.btn-secondary:hover,
.btn-outline-secondary:hover,
.btn-dark:hover,
.btn-outline-dark:hover,
.btn-link:hover {
  background: var(--hover);
  border-color: var(--amber);
  color: var(--amber);
}
.btn-link { border-color: transparent; text-decoration: none; }
.btn-check:checked + .btn {
  background: var(--active);
  border-color: var(--amber);
  color: var(--amber);
}

/* --- form controls --- */
.form-control,
.form-select,
.input-group-text,
textarea.form-control {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--cyan);                  /* §11: user input is cyan */
  font-size: var(--fs-base);
  caret-color: var(--amber);
  box-shadow: none;
  transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.form-control:focus,
.form-select:focus {
  background: var(--surface);
  border-color: var(--amber);
  color: var(--cyan);
  box-shadow: var(--glow-box);
  outline: none;
}
.form-control::placeholder { color: rgb(var(--amber-dim-rgb) / 85%); }
.form-control:disabled,
.form-select:disabled { background: var(--surface); color: var(--amber-dim); opacity: 0.6; }
.form-select {
  color: var(--amber);
  /* Amber chevron, not Bootstrap's grey one.
     The repeat/position/size are NOT optional here: the rule above sets `background:` (the
     SHORTHAND), which resets background-repeat to its initial value of `repeat` and throws away
     Bootstrap's no-repeat. Re-adding only background-image then TILES the chevron across the
     whole control, shredding the label text underneath. Restate all four. */
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ff8f1f' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 12px 12px;
  padding-right: 28px;
}
.form-label,
.form-check-label,
.col-form-label {
  color: var(--amber-dim);
  font-size: var(--fs-micro);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.form-text { color: var(--amber-dim); font-size: var(--fs-micro); }
.form-check-input {
  background-color: var(--surface);
  border-color: var(--border-strong);
}
.form-check-input:checked {
  background-color: var(--amber);
  border-color: var(--amber);
}
.form-check-input:focus {
  border-color: var(--amber);
  box-shadow: var(--glow-box);
}
.form-range::-webkit-slider-thumb { background: var(--amber); }
.form-range::-moz-range-thumb { background: var(--amber); }
.form-range::-webkit-slider-runnable-track { background: rgb(var(--amber-dim-rgb) / 45%); }
.form-range::-moz-range-track { background: rgb(var(--amber-dim-rgb) / 45%); }

/* --- nav / tabs --- */
.nav-tabs,
.nav-pills {
  --bs-nav-tabs-border-color: var(--border);
  --bs-nav-tabs-link-active-bg: var(--surface);
  --bs-nav-tabs-link-active-color: var(--amber);
  --bs-nav-tabs-link-active-border-color: var(--amber);
  --bs-nav-link-color: var(--amber-dim);
  --bs-nav-link-hover-color: var(--amber);
  --bs-nav-pills-link-active-bg: var(--active);
  --bs-nav-pills-link-active-color: var(--amber);
  border-color: var(--border);
}
.nav-link { font-size: var(--fs-small); text-transform: uppercase; letter-spacing: 0.06em; }

/* --- surfaces: card / modal / dropdown / offcanvas / popover / tooltip --- */
.card,
.modal-content,
.dropdown-menu,
.offcanvas,
.popover,
.list-group-item,
.accordion-item,
.accordion-button {
  background: var(--surface);
  border-color: var(--border);
  color: var(--amber);
  border-radius: var(--radius);
}
.modal-content { box-shadow: var(--glow-box); }
.modal-header,
.modal-footer,
.card-header,
.card-footer,
.offcanvas-header { border-color: var(--border); background: transparent; }
.modal-backdrop { background: #000; }
.modal-backdrop.show { opacity: 0.78; }
.dropdown-item { color: var(--amber-dim); font-size: var(--fs-small); }
.dropdown-item:hover,
.dropdown-item:focus { background: var(--hover); color: var(--amber); }
.dropdown-item.active,
.dropdown-item:active { background: var(--active); color: var(--amber); }
.accordion {
  --bs-accordion-bg: var(--surface);
  --bs-accordion-color: var(--amber);
  --bs-accordion-border-color: var(--border);
  --bs-accordion-btn-color: var(--amber);
  --bs-accordion-btn-bg: transparent;
  --bs-accordion-active-bg: var(--raised-2);
  --bs-accordion-active-color: var(--amber);
  --bs-accordion-btn-focus-box-shadow: var(--glow-box);
}
.accordion-button::after {
  /* amber chevron */
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ff8f1f'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}
.btn-close {
  /* Bootstrap's close icon is white by default */
  filter: none;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ff8f1f'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e");
  opacity: 0.7;
}
.btn-close:hover { opacity: 1; }

/* --- badges / alerts / progress / spinners / tables --- */
.badge {
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.06em;
  border-radius: var(--radius);
  border: 1px solid currentColor;
  background: transparent !important;   /* kill .bg-* fills */
  color: var(--amber-dim);
  padding: 1px 5px;
}
.badge.text-bg-primary,
.badge.text-bg-warning,
.badge.bg-primary,
.badge.bg-warning { color: var(--amber) !important; }
.badge.text-bg-info,
.badge.text-bg-success,
.badge.bg-info,
.badge.bg-success { color: var(--cyan) !important; }
.badge.text-bg-danger,
.badge.bg-danger { color: var(--red) !important; }
.badge.text-bg-secondary,
.badge.bg-secondary,
.badge.bg-dark,
.badge.bg-light { color: var(--amber-dim) !important; }

.alert {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--amber);
  border-radius: var(--radius);
  font-size: var(--fs-small);
  padding: 6px 10px;
}
.alert-danger { border-color: var(--border-danger); color: var(--red); }
.alert-info,
.alert-success { border-color: var(--border-info); color: var(--cyan); }
.alert-warning,
.alert-primary { border-color: var(--border-strong); color: var(--amber); }
.alert-secondary { color: var(--amber-dim); }

.progress,
.progress-stacked {
  background: rgb(var(--amber-dim-rgb) / 22%);
  border-radius: var(--radius);
  height: 3px;
}
.progress-bar { background: var(--amber); }

.spinner-border,
.spinner-grow { color: var(--cyan); }   /* "in progress" is cyan (§11) */

.table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--amber);
  --bs-table-border-color: var(--border);
  --bs-table-hover-bg: var(--hover);
  --bs-table-hover-color: var(--amber);
  --bs-table-striped-bg: var(--raised-2);
  --bs-table-striped-color: var(--amber);
  font-size: var(--fs-small);
}

/* Bootstrap utility classes that carry a hue — re-point them all. */
.text-primary, .text-warning, .text-light, .text-body, .text-body-emphasis { color: var(--amber) !important; }
.text-secondary, .text-muted, .text-body-secondary, .text-body-tertiary { color: var(--amber-dim) !important; }
.text-info, .text-success { color: var(--cyan) !important; }
.text-danger { color: var(--red) !important; }
.bg-body, .bg-body-tertiary, .bg-dark, .bg-black { background-color: var(--bg) !important; }
.bg-body-secondary, .bg-secondary, .bg-light { background-color: var(--surface) !important; }
.bg-primary, .bg-warning { background-color: rgb(var(--amber-rgb) / 14%) !important; }
.bg-info, .bg-success { background-color: rgb(var(--cyan-rgb) / 14%) !important; }
.bg-danger { background-color: rgb(var(--red-rgb) / 14%) !important; }
.border, .border-top, .border-end, .border-bottom, .border-start { border-color: var(--border) !important; }
.border-primary, .border-warning { border-color: var(--amber) !important; }
.border-info, .border-success { border-color: var(--cyan) !important; }
.border-danger { border-color: var(--red) !important; }
.border-secondary { border-color: var(--border) !important; }
.shadow, .shadow-sm, .shadow-lg { box-shadow: var(--glow-box) !important; }
.rounded, .rounded-1, .rounded-2, .rounded-3, .rounded-circle, .rounded-pill { border-radius: var(--radius) !important; }