/**
 * CSS Custom Properties for Loon Multi-Tenant CMS/ERP (Bootstrap 6)
 *
 * Single source of truth for every custom property in the app.
 * Load order: reset.css (Bootstrap 6) → variables.css → components → layouts → utilities → plugins
 *
 * Bootstrap 6 declares its root tokens outside any CSS layer, so the values
 * below override them simply by loading after reset.css.
 *
 * Structure:
 *   A. Loon tokens         – used by our own CSS files (light, then dark)
 *   B. Bootstrap 6 tokens  – our values fed into Bootstrap 6 (light, then dark)
 *   C. Bootstrap 6 themes  – per-colour tokens derived from the base colours
 *
 * Notes:
 *   - Component-level variables (btn, card, table, nav…) only take effect when set
 *     on the component class itself, so they live in components.css, not here.
 *   - Our gray scale inverts in dark mode (gray-100 becomes the darkest). Bootstrap 6
 *     expects a fixed gray scale, so every Bootstrap token that would read a gray
 *     is set explicitly in section B instead.
 */


/* =============================================================================
   A. LOON TOKENS – LIGHT
   ============================================================================= */

:root,
[data-bs-theme=light] {

  /* Loon brand colours (logo package v1.1) */
  --loon-graphite: #3B3D40;
  --loon-offwhite: #EEEFED;
  --loon-logo-color: var(--loon-graphite);

  /* Typography (body-font-size, -weight and -line-height are also read by Bootstrap 6) */
  --bs-font-sans-serif: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --bs-body-font-size: 0.925rem;
  --bs-body-font-weight: 400;
  --bs-body-line-height: 1.5715;
  --bs-body-color: #1F2937;
  --bs-body-font-size-xs: 0.75rem;
  --bs-body-font-size-sm: 0.875rem;
  --bs-body-font-size-lg: 1rem;
  --bs-body-line-height-xs: 1.35;
  --bs-body-line-height-sm: 1.45;
  --bs-body-line-height-md: 1.5715;
  --bs-body-line-height-lg: 1.65;
  --bs-body-line-height-computed: calc(1375rem / 1000);

  /* Icons */
  --bs-icon-font-family: bootstrap-icons;
  --bs-icon-font-size: 1.25rem;

  /* Base colours */
  --bs-white: #fff;
  --bs-black: #000;

  /* Gray scale (inverted in dark mode, see A. dark) */
  --bs-gray-100: #F9FAFB;
  --bs-gray-200: #F3F4F6;
  --bs-gray-300: #E5E7EB;
  --bs-gray-400: #D1D5DB;
  --bs-gray-500: #9CA3AF;
  --bs-gray-600: #6B7280;
  --bs-gray-700: #4B5563;
  --bs-gray-800: #374151;
  --bs-gray-900: #1F2937;

  /* Theme colours (the base for section C) */
  --bs-primary: #0c83ff;
  --bs-secondary: #247297;
  --bs-success: #059669;
  --bs-info: #049aad;
  --bs-warning: #f58646;
  --bs-danger: #EF4444;
  --bs-dark: #25282a;


  /* Surfaces */
  --bs-body-bg: #f1f4f9;
  --bs-body-bg-secondary: #fff;
  --bs-component-bg: #fff;

  /* Borders (width, style, color and translucent are also read by Bootstrap 6) */
  --bs-border-width: 1px;
  --bs-border-style: solid;
  --bs-border-color: var(--bs-gray-400);
  --bs-border-hover-color: var(--bs-gray-600);
  --bs-border-color-translucent: rgba(0, 0, 0, 0.125);
  /* Corners: 6px for everything on the page (fields, buttons of every size, cards),
     8px for what floats above it (dialogs, menus, select lists) */
  --bs-border-radius: 0.375rem;
  --bs-border-radius-lg: 0.5rem;
  --bs-border-radius-pill: 50rem;

  /* Shadows (also read by Bootstrap 6) */
  --bs-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.125);
  --bs-box-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.1);
  --bs-box-shadow-lg: 0 6px 12px rgba(0, 0, 0, 0.15);
  --bs-box-shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.075);

  /* Links (also read by Bootstrap 6) */
  --bs-link-color: #0c83ff;
  --bs-link-hover-color: #0962bf;

  /* Interaction states */
  --bs-component-active-bg: #0c83ff;
  --bs-component-active-bg-hover: #0a6edb;
  --bs-component-active-color: #fff;
  --bs-focus-ring-width: 0.125rem;
  --bs-focus-ring-box-shadow: 0 0 0 0.125rem rgba(12, 131, 255, 0.25);
  --bs-placeholder-color: var(--bs-gray-500); /* lighter than text, so an empty field reads as empty */
  --bs-hover-color: var(--bs-body-color);
  --bs-hover-bg: var(--bs-gray-200);
  --bs-hover-bg-active: rgba(0, 0, 0, 0.15);
  --bs-active-color: var(--bs-gray-900);
  --bs-active-bg: rgba(12, 131, 255, 0.1);
  --bs-disabled-color: var(--bs-gray-500);
  --bs-disabled-bg: var(--bs-gray-100);
  --bs-disabled-border-color: var(--bs-gray-500);
  --bs-highlight-bg: rgba(0, 0, 0, 0.15);
  --bs-accent-color: #4eb5e6;

  /* Spacing – our own scale. Bootstrap 6 has spacer-1 to -12 with smaller values;
     we keep ours for 1–5 so our CSS keeps its sizes. 6–12 stay Bootstrap's. */
  --bs-spacer: 1.25rem;
  --bs-spacer-1: 0.3125rem;
  --bs-spacer-2: 0.625rem;
  --bs-spacer-3: 1.25rem;
  --bs-spacer-4: 1.875rem;
  --bs-spacer-5: 3.75rem;
  --bs-spacing: var(--bs-spacer-2) var(--bs-spacer-3);
  --bs-spacing-2: calc(var(--bs-spacer-3) * 0.75) var(--bs-spacer-3);
  --bs-spacing-3: var(--bs-spacer-3);
  /* Fields: the top and bottom padding is worked out from the control height (section B),
     so a field is exactly as tall as a button. Text starts 12px in. */
  --bs-input-padding-y: calc((var(--bs-btn-input-min-height) - var(--bs-btn-input-font-size) * var(--bs-btn-input-line-height) - var(--bs-border-width) * 2) / 2);
  --bs-input-padding-x: 0.75rem;

  /* Layout space – one value for the room around a surface (screen edge to card)
     and inside it (card edge to content). Same outside and inside, so everything
     lines up on one rhythm. Phones use half (see the media query below). */
  --loon-space: 2.5rem;

  /* Surfaces (cards): flat – a light border and a slight shadow under the bottom edge
     only (the negative spread keeps it off the top and sides) */
  --loon-surface-shadow: 0 1px 2px -1px rgba(16, 24, 40, 0.12);

  /* Bars – card headers and footers, dialog headers and footers, the page header.
     Every bar is 72px tall: a title gets 24px above and below, a row of buttons or
     fields (toolbars, footers) 14px. */
  --loon-bar-height: 4.5rem;
  --loon-bar-padding-y: 1.5rem;
  --loon-bar-padding-y-controls: calc((var(--loon-bar-height) - var(--bs-btn-input-min-height)) / 2);

  /* Tab rows (the page header's tabs, card tabs, a table's views) are slimmer than a bar: 52px */
  --loon-tab-height: 3.25rem;

  /* Floating lists – menus and select drop-downs share one look.
     Rows run edge to edge. A row is as tall as a field and its text lines up exactly
     with the text in the field above it. */
  --loon-pop-padding: 0.375rem; /* space above and below the rows */
  --loon-pop-offset: 0.25rem; /* gap between the button or field and its list */
  --loon-pop-radius: var(--bs-border-radius-lg);
  --loon-pop-border-color: var(--bs-border-color);
  --loon-pop-shadow: 0 4px 16px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.06);
  --loon-item-height: 2.5rem; /* 40px rows, 14px text – the same text size as the field */
  --loon-item-padding-y: calc((var(--loon-item-height) - var(--bs-btn-input-font-size) * var(--bs-btn-input-line-height)) / 2);
  --loon-item-padding-x: var(--bs-input-padding-x);
  --loon-item-radius: 0;
  --loon-item-hover-bg: var(--bs-gray-200);
  --loon-item-selected-bg: rgba(12, 131, 255, 0.1);
  --loon-item-selected-color: #0962bf;

  /* Component sizing */
  --component-item-height: var(--bs-btn-input-min-height); /* kept for older CSS – same as a field */
  --bs-component-min-width: 180px;

  /* Timing */
  --bs-transition-base-timer: 0.15s;
  --bs-transition-collapse-timer: 0.3s;

  /* Navbar and nav */
  --bs-navbar-link-height: 70px;
  --bs-nav-link-padding-y: 0.625rem;
  --bs-nav-link-padding-x: 1.25rem;
  --bs-nav-link-color: var(--bs-body-color);
  --bs-nav-link-hover-bg: var(--bs-gray-200);
  --bs-nav-link-hover-active-bg: var(--bs-gray-300);
  --bs-nav-link-hover-color: var(--bs-body-color);
  --bs-nav-link-active-bg: rgba(12, 131, 255, 0.1);
  --bs-nav-link-active-color: var(--bs-link-color);
  --bs-nav-link-spacer-y: 1px;
  --bs-nav-sidebar-padding-y: 0.5rem;
  --bs-nav-sidebar-divider-color: var(--bs-border-color);

  /* Sidebar */
  --bs-sidebar-width: 21%;
  --bs-sidebar-bg: #fff;
  --bs-sidebar-color: var(--bs-body-color);
  --bs-sidebar-border-color: transparent;
  --bs-sidebar-border-width: 0;
  --bs-sidebar-box-shadow: 0.25rem 0 1rem rgba(0, 0, 0, 0.35);
  --bs-sidebar-section-padding-y: 1.25rem;
  --bs-sidebar-section-padding-x: 1.25rem;

  /* Tables */
  --bs-table-cell-padding-y: 1rem;
  --bs-table-cell-padding-x: 1.25rem;
  --bs-table-border-width: var(--bs-border-width);
  --bs-table-group-separator-color: var(--bs-gray-500);

  /* Forms */
  --bs-form-label-margin-bottom: 0.375rem;
  --bs-form-text-color: rgba(31, 41, 55, 0.75);
  --bs-form-text-margin-top: 0.375rem;
  --bs-form-text-inset: calc(var(--bs-border-radius) * 0.5); /* labels and help text sit a tad inside the field's rounded corner */
  --bs-input-focus-bg: transparent;
  --bs-input-focus-border-color: var(--bs-component-active-bg);
  --bs-input-focus-box-shadow: var(--bs-focus-ring-box-shadow);

  /* Buttons (read by our CSS; moved onto .btn in components.css later) */
  --bs-btn-padding-y: var(--bs-spacer-2);
  --bs-btn-padding-x: var(--bs-spacer-3);
  --bs-btn-font-family: var(--bs-font-sans-serif);
  --bs-btn-font-size: var(--bs-body-font-size);
  --bs-btn-line-height: var(--bs-body-line-height);
  --bs-btn-font-weight: 400;
  --bs-btn-border-width: var(--bs-border-width);
  --bs-btn-border-radius: var(--bs-border-radius);
  --bs-btn-disabled-opacity: 0.35;
  --bs-btn-color: var(--bs-body-color);
  --bs-btn-hover-color: var(--bs-hover-color);
  --bs-btn-hover-bg: var(--bs-hover-bg);
  --bs-btn-hover-border-color: var(--bs-border-color);

  /* Other components read by our CSS */
  --bs-card-spacer-y: var(--bs-spacer-3);
  --bs-card-cap-padding-y: calc(var(--bs-card-spacer-y) * 0.75);
  --bs-dropdown-link-color: var(--bs-body-color);
  --bs-accordion-bg: var(--bs-body-bg);
  --bs-toast-zindex: 1090;
  --bs-toast-padding-x: 0.75rem;
  --bs-gutter-x: 1.25rem;
}


/* Phones: half the layout space */
@media (width < 576px) {
  :root {
    --loon-space: 1.25rem;
  }
}

/* Touch screens: floating-list rows (menus, select options) 48px tall – a finger-sized
   target, as in the phone's own menus – with a little more room above and below the list
   and rounder corners */
@media (pointer: coarse) {
  :root {
    --loon-item-height: 3rem;
    --loon-pop-padding: 0.5rem;
    --loon-pop-radius: 0.75rem;
  }
}


/* =============================================================================
   A. LOON TOKENS – DARK
   ============================================================================= */

[data-bs-theme=dark] {

  /* Loon brand */
  --loon-logo-color: var(--loon-offwhite);

  /* Typography */
  --bs-body-color: #fff;

  /* Gray scale – inverted */
  --bs-gray-100: #1f2937;
  --bs-gray-200: #374151;
  --bs-gray-300: #4b5563;
  --bs-gray-400: #6b7280;
  --bs-gray-500: #9ca3af;
  --bs-gray-600: #d1d5db;
  --bs-gray-700: #e5e7eb;
  --bs-gray-800: #f3f4f6;
  --bs-gray-900: #f9fafb;

  /* Theme colours */
  --bs-primary: #3b82f6;
  --bs-secondary: #6b7280;
  --bs-success: #10b981;
  --bs-info: #06b6d4;
  --bs-warning: #f59e0b;
  --bs-danger: #ef4444;
  --bs-dark: #141517;

  /* Surfaces */
  --bs-body-bg: #202125;
  --bs-body-bg-secondary: #2c2d33;
  --bs-component-bg: #2c2d33;

  /* Borders */
  --bs-border-color: #4d4d51;
  --bs-border-color-translucent: rgba(255, 255, 255, 0.125);

  /* Links */
  --bs-link-color: #60a5fa;
  --bs-link-hover-color: #93c5fd;

  /* Interaction states */
  --bs-component-active-bg: #3b82f6;
  --bs-component-active-bg-hover: #5b9cff;
  --bs-component-active-color: #fff;
  --bs-focus-ring-box-shadow: 0 0 0 0.125rem rgba(59, 130, 246, 0.25);
  --bs-placeholder-color: var(--bs-gray-500); /* lighter than text, so an empty field reads as empty */
  --bs-hover-color: #fff;
  --bs-hover-bg: rgba(255, 255, 255, 0.1);
  --bs-hover-bg-active: rgba(255, 255, 255, 0.2);
  --bs-active-color: var(--bs-white);
  --bs-active-bg: rgba(59, 130, 246, 0.2);
  --bs-disabled-color: var(--bs-gray-300);
  --bs-disabled-bg: var(--bs-gray-700);
  --bs-disabled-border-color: var(--bs-gray-300);
  --bs-highlight-bg: rgba(255, 255, 255, 0.15);
  --bs-accent-color: #0ea5e9;

  /* Nav */
  --bs-nav-link-color: var(--bs-body-color);
  --bs-nav-link-hover-bg: var(--bs-gray-700);
  --bs-nav-link-hover-active-bg: var(--bs-gray-600);
  --bs-nav-link-hover-color: var(--bs-link-hover-color);
  --bs-nav-link-active-bg: rgba(59, 130, 246, 0.2);
  --bs-nav-link-active-color: var(--bs-link-color);

  /* Sidebar */
  --bs-sidebar-bg: #2c2d33;
  --bs-sidebar-color: var(--bs-body-color);
  --bs-sidebar-box-shadow: 0.25rem 0 1rem rgba(0, 0, 0, 0.5);

  /* Tables and forms */
  --bs-table-group-separator-color: var(--bs-gray-400);
  --bs-form-text-color: rgba(255, 255, 255, 0.75);

  /* Components */
  --bs-dropdown-link-color: var(--bs-body-color);
  --bs-accordion-bg: var(--bs-body-bg-secondary);

  /* Surfaces and floating lists */
  --loon-surface-shadow: 0 1px 2px -1px rgba(0, 0, 0, 0.5);
  --loon-pop-shadow: 0 4px 16px rgba(0, 0, 0, 0.4), 0 1px 3px rgba(0, 0, 0, 0.3);
  --loon-item-hover-bg: rgba(255, 255, 255, 0.08);
  --loon-item-selected-bg: rgba(59, 130, 246, 0.2);
  --loon-item-selected-color: #93c5fd;
}


/* =============================================================================
   B. BOOTSTRAP 6 TOKENS – LIGHT
   ============================================================================= */

:root,
[data-bs-theme=light] {

  /* Typography */
  --bs-body-font-family: var(--bs-font-sans-serif);
  --bs-font-size-xs: var(--bs-body-font-size-xs);
  --bs-font-size-sm: var(--bs-body-font-size-sm);
  --bs-font-size-md: var(--bs-body-font-size);
  --bs-line-height-xs: var(--bs-body-line-height-xs);
  --bs-line-height-sm: var(--bs-body-line-height-sm);
  --bs-line-height-md: var(--bs-body-line-height-md);
  --bs-code-color: #f35c86;

  /* Content spacing – Bootstrap 6 derives these from --bs-spacer; pinned to the v5 sizes */
  --bs-paragraph-margin-bottom: 1rem;
  --bs-heading-margin-bottom: 0.5rem;
  --bs-legend-margin-bottom: 0.5rem;
  --bs-label-margin-bottom: var(--bs-form-label-margin-bottom);
  --bs-label-font-size: 0.875rem;      /* labels are a step quieter than what you type */
  --bs-label-color: var(--bs-fg-1);
  --bs-list-padding-x: 2rem;
  --bs-hr-margin-y: 1rem;

  /* Links */
  --bs-link-decoration: none;

  /* Surfaces (--bs-bg-body and --bs-fg-body are set in section C) */
  --bs-bg-1: #F9FAFB;
  --bs-bg-2: #F3F4F6;
  --bs-bg-3: #E5E7EB;
  --bs-bg-4: #D1D5DB;
  --bs-fg-1: #374151;
  --bs-fg-2: #4B5563;
  --bs-fg-3: #6B7280;
  --bs-fg-4: #9CA3AF;

  /* Borders */
  --bs-border-body: #E5E7EB;
  --loon-row-border: #DADDE2; /* table rows – a step darker than --bs-border-body, so rows stay apart on bright screens */
  --bs-border-muted: #F3F4F6;
  --bs-border-subtle: #F3F4F6;
  --bs-border-emphasized: #9CA3AF;

  /* Radius scale – Bootstrap 6's ratios applied to our 0.375rem base (radius-5 = base) */
  --bs-radius-1: calc(var(--bs-border-radius) * 0.25);
  --bs-radius-2: calc(var(--bs-border-radius) * 0.375);
  --bs-radius-3: calc(var(--bs-border-radius) * 0.5);
  --bs-radius-4: calc(var(--bs-border-radius) * 0.75);
  --bs-radius-5: var(--bs-border-radius);
  --bs-radius-6: calc(var(--bs-border-radius) * 1.25);
  --bs-radius-7: calc(var(--bs-border-radius) * 1.5);
  --bs-radius-8: calc(var(--bs-border-radius) * 1.75);
  --bs-radius-9: calc(var(--bs-border-radius) * 2);
  --bs-radius-pill: var(--bs-border-radius-pill);

  /* Shadows Bootstrap 6 adds on top of ours */
  --bs-box-shadow-xs: var(--bs-box-shadow-sm);
  --bs-box-shadow-xl: var(--bs-box-shadow-lg);

  /* Focus ring – Bootstrap 6 draws it as an outline; sized to match our old box-shadow ring */
  --bs-focus-ring-offset: 0;

  /* Control sizes – every button and field comes in three sizes. A button and a field of
     the same size are exactly as tall, every size has the same 6px corners, and an
     icon-only button is a square of that height. Text in controls is a step smaller
     than body text, so there is room around it (like a table row).
       sm  36px, 13px text – toolbars, table rows, tight spots
       md  44px, 14px text – the default
       lg  52px, 16px text – single big actions
     Bootstrap 6 reads these for .btn, .form-control and .input-group (colours are in section C). */
  --bs-btn-input-min-height: 2.75rem;
  --bs-btn-input-padding-y: var(--bs-input-padding-y);
  --bs-btn-input-padding-x: 1rem; /* buttons; fields use --bs-input-padding-x */
  --bs-btn-input-font-size: var(--bs-body-font-size-sm);
  --bs-btn-input-font-weight: 500;
  --bs-btn-input-line-height: var(--bs-body-line-height);
  --bs-btn-input-border-radius: var(--bs-border-radius);
  --bs-btn-input-gap: 0.5rem; /* space between an icon and the text in a button (replaces me-2 on the icon) */

  --bs-btn-input-sm-min-height: 2.25rem;
  --bs-btn-input-sm-padding-y: calc((var(--bs-btn-input-sm-min-height) - var(--bs-btn-input-sm-font-size) * var(--bs-btn-input-sm-line-height) - var(--bs-border-width) * 2) / 2);
  --bs-btn-input-sm-padding-x: 0.75rem;
  --bs-btn-input-sm-font-size: 0.8125rem;
  --bs-btn-input-sm-line-height: var(--bs-body-line-height-sm);
  --bs-btn-input-sm-border-radius: var(--bs-border-radius);
  --bs-btn-input-sm-gap: 0.375rem;

  --bs-btn-input-lg-min-height: 3.25rem;
  --bs-btn-input-lg-padding-y: calc((var(--bs-btn-input-lg-min-height) - var(--bs-btn-input-lg-font-size) * var(--bs-btn-input-lg-line-height) - var(--bs-border-width) * 2) / 2);
  --bs-btn-input-lg-padding-x: 1.25rem;
  --bs-btn-input-lg-font-size: var(--bs-body-font-size-lg);
  --bs-btn-input-lg-line-height: var(--bs-body-line-height);
  --bs-btn-input-lg-border-radius: var(--bs-border-radius);
  --bs-btn-input-lg-gap: 0.5rem;

  /* Secondary = Bootstrap 6's neutral (gray) theme */
  --bs-secondary-base: #F3F4F6;
  --bs-secondary-fg: #4B5563;
  --bs-secondary-fg-emphasis: #1F2937;
  --bs-secondary-bg: #F3F4F6;
  --bs-secondary-bg-subtle: #F9FAFB;
  --bs-secondary-bg-muted: #E5E7EB;
  --bs-secondary-border: #D1D5DB;
  --bs-secondary-focus-ring: rgba(107, 114, 128, 0.25);
  --bs-secondary-contrast: #1F2937;

  /* Inverse = dark on light */
  --bs-inverse-base: #1F2937;
  --bs-inverse-fg: #1F2937;
  --bs-inverse-fg-emphasis: #000;
  --bs-inverse-bg: #1F2937;
  --bs-inverse-bg-subtle: #F3F4F6;
  --bs-inverse-bg-muted: #E5E7EB;
  --bs-inverse-border: #9CA3AF;
  --bs-inverse-focus-ring: rgba(31, 41, 55, 0.25);
  --bs-inverse-contrast: #fff;
}


/* =============================================================================
   B. BOOTSTRAP 6 TOKENS – DARK
   ============================================================================= */

[data-bs-theme=dark] {

  /* Typography */
  --bs-code-color: #f472b6;

  /* Surfaces */
  --bs-bg-1: #33343a;
  --bs-bg-2: #3a3b41;
  --bs-bg-3: #414248;
  --bs-bg-4: #4d4d51;
  --bs-fg-1: #f3f4f6;
  --bs-fg-2: #e5e7eb;
  --bs-fg-3: #d1d5db;
  --bs-fg-4: #9ca3af;

  /* Borders */
  --bs-border-body: #4d4d51;
  --loon-row-border: #4d4d51;
  --bs-border-muted: #3a3b41;
  --bs-border-subtle: #33343a;
  --bs-border-emphasized: #6b7280;

  /* Secondary (neutral) */
  --bs-secondary-base: #3a3b41;
  --bs-secondary-fg: #d1d5db;
  --bs-secondary-fg-emphasis: #f3f4f6;
  --bs-secondary-bg: #3a3b41;
  --bs-secondary-bg-subtle: #33343a;
  --bs-secondary-bg-muted: #414248;
  --bs-secondary-border: #4d4d51;
  --bs-secondary-focus-ring: rgba(255, 255, 255, 0.2);
  --bs-secondary-contrast: #fff;

  /* Inverse = light on dark */
  --bs-inverse-base: #f9fafb;
  --bs-inverse-fg: #e5e7eb;
  --bs-inverse-fg-emphasis: #fff;
  --bs-inverse-bg: #f9fafb;
  --bs-inverse-bg-subtle: #33343a;
  --bs-inverse-bg-muted: #414248;
  --bs-inverse-border: #d1d5db;
  --bs-inverse-focus-ring: rgba(255, 255, 255, 0.25);
  --bs-inverse-contrast: #1F2937;
}


/* =============================================================================
   C. BOOTSTRAP 6 THEMES – DERIVED FROM OUR TOKENS
   Declared on every [data-bs-theme] element so a dark section inside a light page
   (or the other way round) recomputes with its own colours.
   fg = base keeps text colours identical to Bootstrap 5 (.text-primary etc.).
   ============================================================================= */

:root,
[data-bs-theme] {

  /* Surfaces – Bootstrap 6 paints cards, menus, dialogs, tables and inputs with
     --bs-bg-body, so it is our component surface. The page colour (--bs-body-bg)
     is applied to <body> in layouts.css. */
  --bs-bg-body: var(--bs-component-bg);
  --bs-fg-body: var(--bs-body-color);

  /* Button and form control colours */
  --bs-btn-input-fg: var(--bs-body-color);
  --bs-btn-input-bg: var(--bs-component-bg);
  --bs-control-disabled-bg: var(--bs-disabled-bg);

  /* Theme base colours */
  --bs-primary-base: var(--bs-primary);
  --bs-accent-base: var(--bs-secondary);
  --bs-success-base: var(--bs-success);
  --bs-info-base: var(--bs-info);
  --bs-warning-base: var(--bs-warning);
  --bs-danger-base: var(--bs-danger);

  /* Primary */
  --bs-primary-fg: var(--bs-primary-base);
  --bs-primary-fg-emphasis: color-mix(in srgb, var(--bs-primary-base) 60%, var(--bs-fg-body));
  --bs-primary-bg: var(--bs-primary-base);
  --bs-primary-bg-subtle: color-mix(in srgb, var(--bs-primary-base) 10%, var(--bs-bg-body));
  --bs-primary-bg-muted: color-mix(in srgb, var(--bs-primary-base) 20%, var(--bs-bg-body));
  --bs-primary-border: color-mix(in srgb, var(--bs-primary-base) 40%, var(--bs-bg-body));
  --bs-primary-focus-ring: color-mix(in srgb, var(--bs-primary-base) 25%, transparent);
  --bs-primary-contrast: #fff;

  /* Accent (our old "secondary" teal) */
  --bs-accent-fg: var(--bs-accent-base);
  --bs-accent-fg-emphasis: color-mix(in srgb, var(--bs-accent-base) 60%, var(--bs-fg-body));
  --bs-accent-bg: var(--bs-accent-base);
  --bs-accent-bg-subtle: color-mix(in srgb, var(--bs-accent-base) 10%, var(--bs-bg-body));
  --bs-accent-bg-muted: color-mix(in srgb, var(--bs-accent-base) 20%, var(--bs-bg-body));
  --bs-accent-border: color-mix(in srgb, var(--bs-accent-base) 40%, var(--bs-bg-body));
  --bs-accent-focus-ring: color-mix(in srgb, var(--bs-accent-base) 25%, transparent);
  --bs-accent-contrast: #fff;

  /* Success */
  --bs-success-fg: var(--bs-success-base);
  --bs-success-fg-emphasis: color-mix(in srgb, var(--bs-success-base) 60%, var(--bs-fg-body));
  --bs-success-bg: var(--bs-success-base);
  --bs-success-bg-subtle: color-mix(in srgb, var(--bs-success-base) 10%, var(--bs-bg-body));
  --bs-success-bg-muted: color-mix(in srgb, var(--bs-success-base) 20%, var(--bs-bg-body));
  --bs-success-border: color-mix(in srgb, var(--bs-success-base) 40%, var(--bs-bg-body));
  --bs-success-focus-ring: color-mix(in srgb, var(--bs-success-base) 25%, transparent);
  --bs-success-contrast: #fff;

  /* Info */
  --bs-info-fg: var(--bs-info-base);
  --bs-info-fg-emphasis: color-mix(in srgb, var(--bs-info-base) 60%, var(--bs-fg-body));
  --bs-info-bg: var(--bs-info-base);
  --bs-info-bg-subtle: color-mix(in srgb, var(--bs-info-base) 10%, var(--bs-bg-body));
  --bs-info-bg-muted: color-mix(in srgb, var(--bs-info-base) 20%, var(--bs-bg-body));
  --bs-info-border: color-mix(in srgb, var(--bs-info-base) 40%, var(--bs-bg-body));
  --bs-info-focus-ring: color-mix(in srgb, var(--bs-info-base) 25%, transparent);
  --bs-info-contrast: #000;

  /* Warning */
  --bs-warning-fg: var(--bs-warning-base);
  --bs-warning-fg-emphasis: color-mix(in srgb, var(--bs-warning-base) 60%, var(--bs-fg-body));
  --bs-warning-bg: var(--bs-warning-base);
  --bs-warning-bg-subtle: color-mix(in srgb, var(--bs-warning-base) 10%, var(--bs-bg-body));
  --bs-warning-bg-muted: color-mix(in srgb, var(--bs-warning-base) 20%, var(--bs-bg-body));
  --bs-warning-border: color-mix(in srgb, var(--bs-warning-base) 40%, var(--bs-bg-body));
  --bs-warning-focus-ring: color-mix(in srgb, var(--bs-warning-base) 25%, transparent);
  --bs-warning-contrast: #000;

  /* Danger */
  --bs-danger-fg: var(--bs-danger-base);
  --bs-danger-fg-emphasis: color-mix(in srgb, var(--bs-danger-base) 60%, var(--bs-fg-body));
  --bs-danger-bg: var(--bs-danger-base);
  --bs-danger-bg-subtle: color-mix(in srgb, var(--bs-danger-base) 10%, var(--bs-bg-body));
  --bs-danger-bg-muted: color-mix(in srgb, var(--bs-danger-base) 20%, var(--bs-bg-body));
  --bs-danger-border: color-mix(in srgb, var(--bs-danger-base) 40%, var(--bs-bg-body));
  --bs-danger-focus-ring: color-mix(in srgb, var(--bs-danger-base) 25%, transparent);
  --bs-danger-contrast: #fff;
}