/* Native form controls (select dropdowns, scrollbars) use browser dark UI */
html {
  color-scheme: dark;
}

/*
 * Convention for this file:
 *   - Every token lives in both the light AND dark block, in the same order,
 *     grouped by purpose. Keeps paired tokens (hex / -rgb, bg / -foreground)
 *     adjacent so drift is obvious at review time.
 *   - Truly theme-invariant tokens live in the bottom :root block.
 *   - Use /design-system → Color Palette stories to visually verify pairs —
 *     split swatches surface hex/rgb drift as a vertical seam.
 */

:root,
[data-bs-theme="light"] {
  /* ── Surfaces ───────────────────────────────────────── */
  --bs-background: #ffffff;
  --bs-background-rgb: 255, 255, 255;
  --bs-foreground: #030711;
  --bs-foreground-rgb: 3, 7, 17;

  --bs-card-bg: #F0F0F0;
  --bs-card-foreground: #030711;

  --bs-popover: #F0F0F0;
  --bs-popover-foreground: #030711;

  --bs-muted: #e2e8f0;
  --bs-muted-foreground: #94a3b8;

  /* ── Brand / semantic ───────────────────────────────── */
  --bs-primary: #2094f3;
  --bs-primary-foreground: #f8fafc;
  --bs-primary-rgb: 32, 148, 243;

  --bs-secondary: #1e293b;
  --bs-secondary-foreground: #e1e7ef;
  --bs-secondary-rgb: 30, 41, 59;

  --bs-accent: #f59f0a;
  --bs-accent-foreground: #0f172a;
  --bs-accent-green: #16a249;
  --bs-accent-red: #dc2828;
  --bs-accent-purple: #7c3bed;
  --bs-accent-orange: #f97415;

  --bs-destructive: #ef4444;
  --bs-destructive-foreground: #f8fafc;

  /* ── Status ─────────────────────────────────────────── */
  --bs-success: #16a249;
  --bs-success-rgb: 22, 162, 73;
  --bs-info: #2094f3;
  --bs-info-rgb: 32, 148, 243;
  --bs-warning: #f59f0a;
  --bs-warning-rgb: 245, 159, 10;
  --bs-danger: #ef4444;
  --bs-danger-rgb: 239, 68, 68;

  /* ── Inputs / borders / ring ────────────────────────── */
  --bs-input: #1e293b;
  --bs-border: #CFCFD0;
  --bs-border-rgb: 207, 207, 208;
  --bs-ring: #2094f3;

  /* ── Bootstrap body aliases ─────────────────────────── */
  --bs-body-bg: var(--bs-background);
  --bs-body-color: var(--bs-foreground);
  --bs-border-color: var(--bs-border);

  /* ── Links ──────────────────────────────────────────── */
  --bs-link-color: #2094f3;
  --bs-link-hover-color: #0f7dd2;

  /* ── Utility-name tokens (flip with theme) ──────────── */
  --bs-light: #e1e7ef;
  --bs-light-rgb: 225, 231, 239;
  --bs-dark: #030711;
  --bs-dark-rgb: 3, 7, 17;

  /* ── LeptonX overrides ──────────────────────────────── */
  --lpx-border-color: #CFCFD0;
  --lpx-brand: #F5A623;
  --lpx-brand-rgb: 245, 166, 35;
  --lpx-navbar-color: var(--bs-background);
  --lpx-navbar-text-color: #030711;
  --lpx-navbar-active-bg-color: #F0F0F0;
  --lpx-navbar-active-text-color: #030711;
  --lpx-navbar-active-text-color-rgb: 3, 7, 17;
  --lpx-content-bg: #ffffff;
  --lpx-shadow: 0 16px 36px rgba(3, 7, 17, 0.25);
}

[data-bs-theme="dark"],
body.lpx-theme-dark {
  /* ── Surfaces ───────────────────────────────────────── */
  --bs-background: #030711;
  --bs-background-rgb: 3, 7, 17;
  --bs-foreground: #e1e7ef;
  --bs-foreground-rgb: 225, 231, 239;

  --bs-card-bg: #0f1729;
  --bs-card-foreground: #e1e7ef;

  --bs-popover: #0f1729;
  --bs-popover-foreground: #e1e7ef;

  --bs-muted: #1e293b;
  --bs-muted-foreground: #94a3b8;

  /* ── Brand / semantic ───────────────────────────────── */
  --bs-primary: #2094f3;
  --bs-primary-foreground: #f8fafc;
  --bs-primary-rgb: 32, 148, 243;

  --bs-secondary: #1e293b;
  --bs-secondary-foreground: #e1e7ef;
  --bs-secondary-rgb: 30, 41, 59;

  --bs-accent: #f59f0a;
  --bs-accent-foreground: #0f172a;
  --bs-accent-green: #16a249;
  --bs-accent-red: #dc2828;
  --bs-accent-purple: #7c3bed;
  --bs-accent-orange: #f97415;

  --bs-destructive: #7f1d1d;
  --bs-destructive-foreground: #f8fafc;

  /* ── Status ─────────────────────────────────────────── */
  --bs-success: #16a249;
  --bs-success-rgb: 22, 162, 73;
  --bs-info: #2094f3;
  --bs-info-rgb: 32, 148, 243;
  --bs-warning: #f59f0a;
  --bs-warning-rgb: 245, 159, 10;
  --bs-danger: #ef4444;
  --bs-danger-rgb: 239, 68, 68;

  /* ── Inputs / borders / ring ────────────────────────── */
  --bs-input: #1e293b;
  --bs-border: #2c3c56;
  --bs-border-rgb: 44, 60, 86;
  --bs-ring: #2094f3;

  /* ── Bootstrap body aliases ─────────────────────────── */
  --bs-body-bg: var(--bs-background);
  --bs-body-color: var(--bs-foreground);
  --bs-border-color: var(--bs-border);

  /* ── Links ──────────────────────────────────────────── */
  --bs-link-color: #2094f3;
  --bs-link-hover-color: #0f7dd2;

  /* ── Utility-name tokens (flip with theme) ──────────── */
  --bs-light: #1e293b;
  --bs-light-rgb: 30, 41, 59;
  --bs-dark: #e1e7ef;
  --bs-dark-rgb: 225, 231, 239;

  /* ── LeptonX overrides ──────────────────────────────── */
  --lpx-border-color: #2c3c56;
  --lpx-brand: #F5A623;
  --lpx-brand-rgb: 245, 166, 35;
  --lpx-navbar-color: var(--bs-background);
  --lpx-navbar-text-color: #e1e7ef;
  --lpx-navbar-active-bg-color: #1e293b;
  --lpx-navbar-active-text-color: #e1e7ef;
  --lpx-navbar-active-text-color-rgb: 225, 231, 239;
  --lpx-content-bg: var(--bs-background);
  --lpx-shadow: 0 16px 36px rgba(3, 7, 17, 0.25);

  /* Dark-only: override Bootstrap's default accordion chevron to use primary */
  --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%232094f3'%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");
}

/* ── Theme-invariant tokens ──────────────────────────── */
:root {
  --bs-border-radius: 4px;
  --bs-border-radius-md: 8px;
  --bs-border-radius-lg: 12px;

  --lpx-theme-light-bg: none;
  --lpx-theme-dim-bg: url('/images/va-logo.png');
  --lpx-theme-dark-bg: url('/images/va-logo.png');
  --lpx-logo: none;
  --lpx-logo-collapsed: none;
  --lpx-logo-icon: url('/images/va-logo-collapsed.png');

  --lpx-sidebar-width-sm: 105px;
  --lpx-sidebar-width: 300px;
  --lpx-sidebar-collapsed-width: 80px;
  --lpx-toolbar-height: 64px;
  --lpx-footer-height: 50px;

  --va-dark: #030711;

  /* Chart palette — matches VastChartColors.cs and docs/guides/Chart-Color-Palette-Guide.md */
  --va-chart-golden: #FBB23F;
  --va-chart-golden-rgb: 251, 178, 63;
  --va-chart-red-orange: #F2562F;
  --va-chart-red-orange-rgb: 242, 86, 47;
  --va-chart-magenta: #C21264;
  --va-chart-magenta-rgb: 194, 18, 100;
  --va-chart-blue: #5F94E8;
  --va-chart-blue-rgb: 95, 148, 232;
  --va-chart-cyan: #6ECFEC;
  --va-chart-cyan-rgb: 110, 207, 236;
  --va-chart-charcoal: #686461;
  --va-chart-charcoal-rgb: 104, 100, 97;
}