/* Explicit dark and the missing-scheme first paint share the cockpit base.
   The base selector excludes named vibes; it never paints over a preview. */
:root[data-scheme="dark"]:where(:not([data-theme]), [data-theme="light"], [data-theme="dark"], [data-theme=""]),
:root:not([data-scheme]):where(:not([data-theme]), [data-theme="light"], [data-theme="dark"], [data-theme=""]) {
  color-scheme: dark;
  --color-canvas: #0b1216;
  --color-surface: #12161c;
  --color-surface-raised: #171c23;
  --color-surface-sunken: #0e1319;
  --color-surface-cool: #12161c;
  --color-surface-cool-2: #171c23;
  --color-hover-surface: #1b2129;
  --color-ink: #f2f5f7;
  --color-ink-dim: #c7ccd3;
  --color-ink-muted: #8a929c;
  --color-ink-secondary: #c7ccd3;
  --color-ink-tertiary: #8a929c;
  --color-ink-rgb: 242, 245, 247;
  --color-surface-rgb: 18, 22, 28;
  --color-line: #232a33;
  --color-line-strong: #2e3742;
  --color-line-subtle: #1b2129;
  --color-control-line: #768390;
  --color-focus: #ff8a4d;
  --color-accent: #dd5100;
  --color-accent-aa: #ff8a4d;
  --color-accent-strong: #ff8a4d;
  --color-brand-primary: #bd4500;
  --color-brand-primary-dark-10: #a83d00;
  --color-brand-primary-dark-20: #8a3300;
  --color-brand-secondary: #6ab8ff;
  --color-status-success: #3ecf7b;
  --color-status-warning: #f4b740;
  --color-status-error: #ff8d7b;
  --color-status-info: #6ab8ff;
  --color-tint-success-text: #dff6e8;
  --color-tint-warning-text: #ffe7ba;
  --color-tint-error-text: #ffd5cf;
  --color-tint-info-text: #c6e5ff;
  --color-tint-indigo-text: #d7c6ff;
  --color-invert-bg: #111111;
  --color-invert-ink: #ffffff;
  --signal-tone: #ffffff;
  --signal-amt: 44%;
}

/* Bridge both effective bases into the tokens their actual consumers read.
   Local Bootstrap component defaults require component rules as well as root aliases. */
:root[data-scheme]:where(:not([data-theme]), [data-theme="light"], [data-theme="dark"], [data-theme=""]),
:root:not([data-scheme]):where(:not([data-theme]), [data-theme="light"], [data-theme="dark"], [data-theme=""]) {
  --body-bg: var(--color-canvas);
  --body-color: var(--color-ink);
  --bg-color: var(--color-canvas);
  --surface-bg: var(--color-surface);
  --bg-primary: var(--color-canvas);
  --bg-secondary: var(--color-surface);
  --bg-tertiary: var(--color-surface-raised);
  --bg-input: var(--color-surface);
  --bg-hover: var(--color-hover-surface);
  --color-text: var(--color-ink);
  --color-text-primary: var(--color-ink);
  --color-text-secondary: var(--color-ink-dim);
  --color-text-tertiary: var(--color-ink-muted);
  --input-bg: var(--color-surface);
  --input-bg-focus: var(--color-surface);
  --input-border: var(--color-control-line);
  --input-border-focus: var(--color-focus);
  --color-shell-canvas: var(--color-canvas);
  /* The ambient engine owns --v-* water colors. Shell text/canvas use UI tokens. */
  --color-shell-v-canvas: var(--color-canvas);
  --color-shell-ink: var(--color-ink);
  --color-shell-ink-dim: var(--color-ink-dim);
  --color-shell-ink-secondary: var(--color-ink-secondary);
  --color-shell-ink-tertiary: var(--color-ink-tertiary);
  --color-shell-accent: var(--color-accent-aa);
  --color-shell-line: var(--color-line);
  --color-shell-line-strong: var(--color-line-strong);
  --color-shell-line-subtle: var(--color-line-subtle);
  --color-shell-surface: var(--color-surface);
  --color-shell-surface-raised: var(--color-surface-raised);
  --color-shell-surface-sunken: var(--color-surface-sunken);
  --color-shell-surface-cool: var(--color-surface-cool);
  --color-shell-surface-cool-2: var(--color-surface-cool-2);
  --bs-body-bg: var(--color-canvas);
  --bs-body-color: var(--color-ink);
  --bs-body-color-rgb: var(--color-ink-rgb);
  --bs-heading-color: var(--color-ink);
  --bs-emphasis-color: var(--color-ink);
  --bs-secondary-color: var(--color-ink-dim);
  --bs-secondary-bg: var(--color-surface-raised);
  --bs-tertiary-color: var(--color-ink-muted);
  --bs-tertiary-bg: var(--color-surface-sunken);
  --bs-border-color: var(--color-line);
  --bs-border-color-translucent: var(--color-line);
  --bs-link-color: var(--color-brand-secondary);
  --bs-link-hover-color: var(--color-brand-secondary);
}

:root:where(:not([data-theme]), [data-theme="light"], [data-theme="dark"], [data-theme=""]) body {
  background-color: var(--color-canvas);
  color: var(--color-ink);
}
:root:where(:not([data-theme]), [data-theme="light"], [data-theme="dark"], [data-theme=""]) .card {
  background-color: var(--color-surface);
  color: var(--color-ink);
  border-color: var(--color-line);
}
:root:where(:not([data-theme]), [data-theme="light"], [data-theme="dark"], [data-theme=""]) :is(.form-control, .form-select, .input-group-text) {
  background-color: var(--color-surface);
  color: var(--color-ink);
  border-color: var(--color-control-line);
}
:root:where(:not([data-theme]), [data-theme="light"], [data-theme="dark"], [data-theme=""]) :is(.form-control, .form-select)::placeholder {
  color: var(--color-ink-muted);
  opacity: 1;
}
:root:where(:not([data-theme]), [data-theme="light"], [data-theme="dark"], [data-theme=""]) .form-check-input:not(:checked) {
  background-color: var(--color-surface);
  border-color: var(--color-control-line);
}
:root:where(:not([data-theme]), [data-theme="light"], [data-theme="dark"], [data-theme=""]) :is(.form-control, .form-select, .form-check-input):focus-visible {
  border-color: var(--color-focus);
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
  box-shadow: none;
}
:root:where(:not([data-theme]), [data-theme="light"], [data-theme="dark"], [data-theme=""]) :is(.btn-secondary, .btn-light, .btn-outline-secondary) {
  background-color: var(--color-surface-raised);
  color: var(--color-ink);
  border-color: var(--color-control-line);
}
:root:where(:not([data-theme]), [data-theme="light"], [data-theme="dark"], [data-theme=""]) :is(.btn-secondary, .btn-light, .btn-outline-secondary):hover {
  background-color: var(--color-hover-surface);
}
/* app.css pins resting secondary borders with !important; win that exact gate. */
:root:where(:not([data-theme]), [data-theme="light"], [data-theme="dark"], [data-theme=""]) :is(.btn-secondary, .btn-outline-secondary):not(:hover):not(.active) {
  border-color: var(--color-control-line) !important;
}
/* The dashboard uses its own button class; white labels need the same AA fill. */
:root:where(:not([data-theme]), [data-theme="light"], [data-theme="dark"], [data-theme=""]) .mc-btn--primary {
  background-color: var(--color-brand-primary);
  color: #ffffff;
}
:root:where(:not([data-theme]), [data-theme="light"], [data-theme="dark"], [data-theme=""]) .mc-btn--primary:hover {
  background-color: var(--color-brand-primary-dark-10);
}
:root:where(:not([data-theme]), [data-theme="light"], [data-theme="dark"], [data-theme=""]) .table {
  color: var(--color-ink);
  border-color: var(--color-line);
  --bs-table-color: var(--color-ink);
  --bs-table-bg: transparent;
  --bs-table-striped-color: var(--color-ink);
  --bs-table-active-color: var(--color-ink);
  --bs-table-hover-color: var(--color-ink);
  --bs-table-striped-bg: rgba(var(--color-ink-rgb), 0.04);
  --bs-table-active-bg: rgba(var(--color-ink-rgb), 0.08);
  --bs-table-hover-bg: rgba(var(--color-ink-rgb), 0.06);
}
:root:where(:not([data-theme]), [data-theme="light"], [data-theme="dark"], [data-theme=""]) .table-secondary {
  --bs-table-bg: var(--color-surface-sunken);
}
:root:where(:not([data-theme]), [data-theme="light"], [data-theme="dark"], [data-theme=""]) .text-muted {
  color: var(--color-ink-muted) !important;
}
:root:where(:not([data-theme]), [data-theme="light"], [data-theme="dark"], [data-theme=""]) .alert-success {
  color: var(--color-tint-success-text);
  background-color: rgba(var(--color-status-success-rgb), 0.1);
  border-color: rgba(var(--color-status-success-rgb), 0.35);
}

/* A base scheme must not inherit the ambient palette's dark koi-body ink. */
:root[data-scheme]:where(:not([data-theme]), [data-theme="light"], [data-theme="dark"], [data-theme=""]) .app-shell__mobilenav {
  --shell-glass: color-mix(in srgb, var(--color-surface) 85%, transparent);
  --shell-edge: color-mix(in srgb, var(--color-ink) 12%, transparent);
}
:root[data-scheme]:where(:not([data-theme]), [data-theme="light"], [data-theme="dark"], [data-theme=""]) .mc-side,
:root:not([data-scheme]):where(:not([data-theme]), [data-theme="light"], [data-theme="dark"], [data-theme=""]) .mc-side {
  --ss-glass: color-mix(in srgb, var(--color-surface) 85%, transparent);
  --ss-edge: color-mix(in srgb, var(--color-ink) 12%, transparent);
  --ss-edge-inset: color-mix(in srgb, var(--color-ink) 6%, transparent);
  --ss-ink: var(--color-ink);
  --ss-ink-2: var(--color-ink-dim);
  --ss-ink-3: var(--color-ink-muted);
  --ss-ink-4: var(--color-ink-muted);
  --ss-hover: var(--color-hover-surface);
  --ss-active: var(--color-surface-raised);
  --ss-brand: var(--color-accent);
  --ss-brand-deep: var(--color-brand-primary);
  --ss-on-brand: #ffffff;
  --ss-panel: var(--color-surface-sunken);
  --ss-line: var(--color-line);
}