/* =============================================================================
   OrganicSystem Enterprise Theme Engine
   Single source of truth for Light / Dark tokens.
   Every page inherits these variables — prefer tokens over hardcoded colors.
   ============================================================================= */

html {
  color-scheme: light;
  --os-theme-name: light;
  --os-font-family: "Manrope", "Segoe UI", system-ui, sans-serif;
  background-color: var(--os-color-background, #f3f6f4);
  color: var(--os-color-text, #1a2e24);

  /* ---- Core surfaces ---- */
  --os-color-background: #f3f6f4;
  --os-color-page-bg: var(--os-color-background);
  --os-color-surface: #ffffff;
  --os-color-surface-muted: #eef3f0;
  --os-color-panel: var(--os-color-surface);
  --os-color-card: var(--os-color-surface);
  --os-color-toolbar: var(--os-color-surface);
  --os-color-header: #0e4f31;
  --os-color-footer: var(--os-color-surface);
  --os-color-sidebar: #f6faf7;
  --os-color-sidebar-elevated: var(--os-color-surface);

  /* ---- Text (WCAG AA: body ≥ 4.5:1 on surface) ---- */
  --os-color-text: #1a2e24;
  --os-color-text-muted: #4d6358;
  --os-color-text-inverse: #ffffff;
  --os-color-link: #0e4f31;
  --os-color-link-hover: #0a3d26;
  --os-color-icon: var(--os-color-text);
  --os-color-icon-muted: var(--os-color-text-muted);

  /* ---- Borders / shadows / overlay ---- */
  --os-color-border: #d5ddd8;
  --os-color-border-strong: #bcc8c0;
  --os-color-hover: color-mix(in srgb, var(--os-color-primary) 12%, var(--os-color-surface));
  --os-color-focus: #3d9b6e;
  --os-color-focus-ring: rgba(20, 108, 67, 0.28);
  --os-color-focus-border: var(--os-color-focus);
  --os-color-shadow: 0 1px 3px rgba(14, 79, 49, 0.08);
  --os-color-shadow-md: 0 8px 24px rgba(14, 79, 49, 0.08);
  --os-color-shadow-lg: 0 16px 40px rgba(14, 79, 49, 0.1);
  --os-color-overlay: rgba(14, 40, 28, 0.45);
  --os-shadow-sm: var(--os-color-shadow);
  --os-shadow-md: var(--os-color-shadow-md);
  --os-shadow-lg: var(--os-color-shadow-lg);

  /* ---- Brand / semantic (Organic System / Bolanto Soft) ---- */
  --os-color-primary: #146c43;
  --os-color-primary-dark: #0e4f31;
  --os-color-primary-light: #2d8a5e;
  --os-color-primary-soft: #e7f4ec;
  --os-color-accent: #146c43;
  --os-color-accent-dark: #0e4f31;
  --os-color-success: #146c43;
  --os-color-warning: #9a5f18;
  --os-color-danger: #b42318;
  --os-color-danger-dark: #8f1c14;
  --os-color-info: #1f7a6a;

  /* ---- Popup / dialog / modal / dropdown / menu ---- */
  --os-color-popup: var(--os-color-surface);
  --os-color-dialog: var(--os-color-surface);
  --os-color-modal: var(--os-color-surface);
  --os-color-dropdown: var(--os-color-surface);
  --os-color-menu: var(--os-color-surface);
  --os-color-tooltip: #1e293b;
  --os-color-tooltip-text: var(--os-color-text-inverse);
  --os-color-toast: var(--os-color-surface);
  --os-color-notification: var(--os-color-surface);
  --os-color-badge: var(--os-color-primary-soft);
  --os-color-badge-text: var(--os-color-primary-dark);

  /* ---- Tabs / accordion / section ---- */
  --os-color-tabs: transparent;
  --os-color-tabs-active: var(--os-color-surface);
  --os-color-accordion: var(--os-color-surface);
  --os-color-section-header: #e8f0eb;
  --os-color-section-title: var(--os-color-section-header);
  --os-color-section-title-bg: var(--os-color-section-header);
  --os-color-section-title-text: var(--os-color-text);

  /* ---- Form / inputs ---- */
  --os-color-form: var(--os-color-surface);
  --os-color-input: #ffffff;
  --os-color-textarea: var(--os-color-input);
  --os-color-select: var(--os-color-input);
  --os-color-checkbox: var(--os-color-input);
  --os-color-radio: var(--os-color-input);
  --os-color-form-control-bg: var(--os-color-input);
  --os-color-form-border: var(--os-color-border);
  --os-color-form-label: #eef5f1;
  --os-color-form-label-text: #1b3a2f;
  --os-color-input-hover: var(--os-color-hover);
  --os-color-input-focus: var(--os-color-input);
  --os-color-input-readonly: var(--os-color-surface-muted);
  --os-color-input-disabled: var(--os-color-surface-muted);
  --os-color-input-error: color-mix(in srgb, var(--os-color-danger) 12%, var(--os-color-input));
  --os-color-input-success: color-mix(in srgb, var(--os-color-success) 12%, var(--os-color-input));
  --os-color-input-text: #1a2e24;
  --os-color-placeholder: var(--os-color-text-muted);

  /* ---- Grid (UI-1.7 — shared DataGrid / GridView tokens) ---- */
  --os-color-grid: var(--os-color-surface);
  --os-color-grid-header: #e8f0eb;
  --os-color-grid-header-text: #1b3a2f;
  --os-color-grid-body: var(--os-color-surface);
  --os-color-grid-footer: var(--os-color-surface-muted);
  --os-color-grid-totals: var(--os-color-surface-muted);
  --os-color-grid-alt-row: color-mix(in srgb, var(--os-color-surface-muted) 55%, var(--os-color-surface));
  --os-color-grid-selected: color-mix(in srgb, var(--os-color-primary) 18%, var(--os-color-surface));
  --os-color-grid-focused: color-mix(in srgb, var(--os-color-primary) 12%, var(--os-color-surface));
  --os-color-grid-hover: color-mix(in srgb, var(--os-color-primary) 8%, var(--os-color-surface));
  --os-color-grid-filter: var(--os-color-surface);
  --os-color-grid-pager: var(--os-color-surface);
  --os-color-grid-border: var(--os-color-border);
  --os-color-grid-icon: var(--os-color-icon-muted);
  --os-color-grid-icon-active: var(--os-color-primary);
  --os-color-grid-search: var(--os-color-surface);
  --os-color-grid-group: var(--os-color-surface-muted);
  --os-color-grid-link: var(--os-color-link);
  --os-color-grid-empty: var(--os-color-text-muted);
  --os-color-grid-error-bg: color-mix(in srgb, var(--os-color-danger) 12%, var(--os-color-surface));
  --os-color-grid-error-text: var(--os-color-danger);
  --os-color-grid-load: var(--os-color-popup);
  --os-color-grid-chooser: var(--os-color-popup);
  --os-color-grid-menu: var(--os-color-menu);

  /* ---- Buttons ---- */
  --os-color-button: var(--os-color-surface);
  --os-color-button-text: #13253f;
  --os-color-button-primary: var(--os-color-primary);
  --os-color-button-primary-text: var(--os-color-text-inverse);
  --os-color-button-secondary: var(--os-color-surface-muted);
  --os-color-button-secondary-text: var(--os-color-text);
  --os-color-button-danger: var(--os-color-danger);
  --os-color-button-danger-text: var(--os-color-text-inverse);
  --os-color-button-success: var(--os-color-success);
  --os-color-button-success-text: var(--os-color-text-inverse);
  --os-color-button-warning: var(--os-color-warning);
  --os-color-button-warning-text: var(--os-color-text-inverse);
  --os-color-button-disabled: var(--os-color-surface-muted);
  --os-color-button-disabled-text: var(--os-color-text-muted);
  --os-color-button-outline: transparent;
  --os-color-button-outline-text: var(--os-color-primary);
  --os-btn-text-ink: #1a2e24;
  --os-btn-text-on-fill: var(--os-color-text-inverse);
  --os-btn-text-muted: #3d5270;
  --os-btn-text-color: var(--os-btn-text-ink);
  --os-btn-border: var(--os-color-border-strong);
  --os-btn-border-hover: var(--os-color-primary-dark);
  --os-btn-neutral-bg: var(--os-color-surface);
  --os-btn-neutral-bg-hover: var(--os-color-hover);
  --os-btn-neutral-bg-selected: var(--os-color-primary-soft);
  --os-btn-3d-neutral-bg: var(--os-btn-neutral-bg);
  --os-btn-3d-neutral-bg-hover: var(--os-btn-neutral-bg-hover);

  /* ---- Checkbox / radio ---- */
  --os-color-checkbox-border: var(--os-color-border-strong);
  --os-color-checkbox-checked-bg: var(--os-color-primary);
  --os-color-checkbox-checked-border: var(--os-color-primary);
  --os-color-checkbox-checked-mark: var(--os-color-text-inverse);
  --os-color-radio-border: var(--os-color-border-strong);
  --os-color-radio-checked-bg: var(--os-color-primary);
  --os-color-radio-checked-dot: var(--os-color-text-inverse);

  /* ---- Date picker / calendar (DevExtreme + native) ---- */
  --os-color-calendar-bg: var(--os-color-popup);
  --os-color-calendar-border: var(--os-color-border);
  --os-color-calendar-header: var(--os-color-section-header);
  --os-color-calendar-header-text: var(--os-color-text);
  --os-color-calendar-cell: transparent;
  --os-color-calendar-cell-text: var(--os-color-text);
  --os-color-calendar-cell-hover: var(--os-color-hover);
  --os-color-calendar-cell-selected: var(--os-color-primary);
  --os-color-calendar-cell-selected-text: var(--os-color-text-inverse);
  --os-color-calendar-cell-today: var(--os-color-accent);
  --os-color-calendar-cell-other: var(--os-color-text-muted);
  --os-color-datepicker: var(--os-color-input);

  /* ---- Notifications / toast tones ---- */
  --os-color-notification-info-bg: color-mix(in srgb, var(--os-color-info) 14%, var(--os-color-surface));
  --os-color-notification-success-bg: color-mix(in srgb, var(--os-color-success) 16%, var(--os-color-surface));
  --os-color-notification-warning-bg: color-mix(in srgb, var(--os-color-warning) 16%, var(--os-color-surface));
  --os-color-notification-danger-bg: color-mix(in srgb, var(--os-color-danger) 16%, var(--os-color-surface));

  /* ---- Shell navigation (sidebar / topbar consume these — no local hex) ---- */
  --os-shell-accent: var(--os-color-accent);
  --os-shell-accent-soft: color-mix(in srgb, var(--os-color-accent) 14%, var(--os-color-surface));
  --os-shell-nav-hover: color-mix(in srgb, var(--os-color-accent) 18%, var(--os-color-surface));
  --os-shell-nav-active: var(--os-color-accent);
  --os-shell-nav-active-text: var(--os-color-text-inverse);

  /* ---- Progress / scrollbar ---- */
  --os-color-progress-track: var(--os-color-surface-muted);
  --os-color-progress-bar: var(--os-color-primary);
  --os-scroll-size: 10px;
  --os-scroll-radius: 999px;
  --os-scroll-track: transparent;
  --os-scroll-thumb: color-mix(in srgb, var(--os-color-text-muted) 42%, transparent);
  --os-scroll-thumb-hover: color-mix(in srgb, var(--os-color-text-muted) 68%, transparent);
  --os-scroll-thumb-active: color-mix(in srgb, var(--os-color-primary) 55%, var(--os-color-text-muted));

  /* ---- Enterprise section container ---- */
  --os-section-border: var(--os-color-border);
  --os-section-bg: var(--os-color-surface);
  --os-section-header-bg: var(--os-color-surface-muted);
  --os-section-header-text: var(--os-color-text);
  --os-section-radius: 0.5rem;
  --os-section-gap: 0.85rem;
  --os-section-header-height: 2rem;
  --os-section-header-pad-x: 0.75rem;
  --os-section-body-pad: 0.75rem;
  --os-section-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);

  /* ---- Module hub ---- */
  --os-hub-workspace-bg: color-mix(in srgb, var(--os-color-page-bg) 88%, var(--os-color-primary-soft) 12%);
  --os-hub-panel-bg: var(--os-color-surface);
  --os-hub-panel-border: color-mix(in srgb, var(--os-color-border) 70%, var(--os-color-primary) 30%);
  --os-hub-panel-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px rgba(15, 23, 42, 0.04);
  --os-hub-title: var(--os-color-text);
  --os-hub-muted: var(--os-color-text-muted);
  --os-hub-accent-bar: var(--os-color-primary);
  --os-hub-icon-bg: var(--os-color-primary-soft);
  --os-hub-icon-color: var(--os-color-primary-dark);
  --os-hub-header-bg: var(--os-color-surface);
  --os-hub-header-border: var(--os-color-border);
  --os-hub-radius: 0.65rem;
  --os-hub-gap: 1.25rem;

  /* ---- Chrome menus / controls ---- */
  --os-app-dropdown-bg: var(--os-color-dropdown);
  --os-app-dropdown-color: var(--os-color-text);
  --os-app-dropdown-muted: var(--os-color-text-muted);
  --os-app-dropdown-border: var(--os-color-border);
  --os-app-dropdown-hover-bg: var(--os-shell-accent-soft);
  --os-app-dropdown-shadow: var(--os-color-shadow-md);
  --os-app-control-bg: var(--os-color-surface);
  --os-app-control-color: var(--os-color-text);
  --os-app-control-border: var(--os-color-border);
  --os-app-control-hover-bg: var(--os-shell-accent-soft);

  /* ---- Popup selection (lookups follow form/popup surfaces) ---- */
  --os-popup-surface: var(--os-color-form-control-bg);
  --os-popup-border: var(--os-color-form-border);
  --os-popup-selection-ink: var(--os-color-input-text);
  --os-popup-checkbox-checked-fg: var(--os-btn-text-on-fill);
  --os-popup-checkbox-checked-bg: var(--os-color-primary);
  --os-popup-selection-hover-bg: color-mix(in srgb, var(--os-color-primary) 12%, var(--os-color-form-control-bg));
  --os-popup-selection-selected-bg: color-mix(in srgb, var(--os-color-primary) 18%, var(--os-color-form-control-bg));

  /* ---- Module headers ---- */
  --os-module-ags-header: var(--os-color-header);
  --os-module-aps-header: var(--os-color-header);
  --os-module-prs-header: var(--os-color-header);
  --os-module-header-text: var(--os-color-text-inverse);

  /* ---- Bootstrap bridge ---- */
  --bs-body-bg: var(--os-color-page-bg);
  --bs-body-color: var(--os-color-text);
  --bs-border-color: var(--os-color-border);
  --bs-primary: var(--os-color-primary);
  --bs-link-color: var(--os-color-link);
  --bs-link-hover-color: var(--os-color-link-hover);
  --bs-secondary-color: var(--os-color-text-muted);
  --bs-tertiary-bg: var(--os-color-surface-muted);
}

html[data-theme="light"],
body[data-theme="light"] {
  color-scheme: light;
  --os-theme-name: light;
}

html[data-theme="dark"],
body[data-theme="dark"] {
  color-scheme: dark;
  --os-theme-name: dark;
  background-color: var(--os-color-background, #1b1a19);
  color: var(--os-color-text, #f1f5f9);

  --os-color-background: #1b1a19;
  --os-color-page-bg: var(--os-color-background);
  --os-color-surface: #252423;
  --os-color-surface-muted: #2b2a29;
  --os-color-panel: var(--os-color-surface);
  --os-color-card: var(--os-color-surface);
  --os-color-toolbar: var(--os-color-surface-muted);
  --os-color-header: #252423;
  --os-color-footer: var(--os-color-surface);
  --os-color-sidebar: #1b1a19;
  --os-color-sidebar-elevated: #252423;

  /* WCAG AA on #252423 surface — muted stays ≥ 4.5:1 */
  --os-color-text: #f5f4f3;
  --os-color-text-muted: #d0cecc;
  --os-color-text-inverse: #ffffff;
  --os-color-link: #6fbf93;
  --os-color-link-hover: #9fd4b5;
  --os-color-icon: var(--os-color-text);
  --os-color-icon-muted: var(--os-color-text-muted);

  --os-color-border: rgba(255, 255, 255, 0.18);
  --os-color-border-strong: rgba(255, 255, 255, 0.28);
  --os-color-hover: color-mix(in srgb, var(--os-color-primary) 18%, var(--os-color-surface));
  --os-color-focus: #6fbf93;
  --os-color-focus-ring: rgba(61, 155, 110, 0.4);
  --os-color-focus-border: var(--os-color-focus);
  --os-color-shadow: 0 1px 3px rgba(0, 0, 0, 0.28);
  --os-color-shadow-md: 0 8px 24px rgba(0, 0, 0, 0.35);
  --os-color-shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.4);
  --os-color-overlay: rgba(0, 0, 0, 0.55);
  --os-shadow-sm: var(--os-color-shadow);
  --os-shadow-md: var(--os-color-shadow-md);
  --os-shadow-lg: var(--os-color-shadow-lg);

  --os-color-primary: #3d9b6e;
  --os-color-primary-dark: #2d8a5e;
  --os-color-primary-light: #6fbf93;
  --os-color-primary-soft: rgba(61, 155, 110, 0.22);
  --os-color-accent: #3d9b6e;
  --os-color-accent-dark: #2aa56e;
  --os-color-success: #3d9b6e;
  --os-color-warning: #e0a04a;
  --os-color-danger: #e35d52;
  --os-color-danger-dark: #c4453c;
  --os-color-info: #5bb89a;

  --os-color-popup: var(--os-color-surface);
  --os-color-dialog: var(--os-color-surface);
  --os-color-modal: var(--os-color-surface);
  --os-color-dropdown: var(--os-color-surface);
  --os-color-menu: var(--os-color-surface);
  --os-color-tooltip: #3b3a39;
  --os-color-tooltip-text: var(--os-color-text);
  --os-color-toast: var(--os-color-surface);
  --os-color-notification: var(--os-color-surface);
  --os-color-badge: var(--os-color-primary-soft);
  --os-color-badge-text: var(--os-color-primary-light);

  --os-color-tabs: transparent;
  --os-color-tabs-active: var(--os-color-surface);
  --os-color-accordion: var(--os-color-surface);
  --os-color-section-header: #2f2e2d;
  --os-color-section-title: var(--os-color-section-header);
  --os-color-section-title-bg: var(--os-color-section-header);
  --os-color-section-title-text: var(--os-color-text);

  /* True dark form controls (ERP style — no white fields in dark theme) */
  --os-color-form: var(--os-color-surface);
  --os-color-input: #323130;
  --os-color-textarea: var(--os-color-input);
  --os-color-select: var(--os-color-input);
  --os-color-checkbox: var(--os-color-input);
  --os-color-radio: var(--os-color-input);
  --os-color-form-control-bg: var(--os-color-input);
  --os-color-form-border: rgba(255, 255, 255, 0.28);
  --os-color-form-label: #2f2e2d;
  --os-color-form-label-text: var(--os-color-text);
  --os-color-input-hover: #3b3a39;
  --os-color-input-focus: #3b3a39;
  --os-color-input-readonly: #2b2a29;
  --os-color-input-disabled: #252423;
  --os-color-input-error: color-mix(in srgb, var(--os-color-danger) 22%, var(--os-color-input));
  --os-color-input-success: color-mix(in srgb, var(--os-color-success) 18%, var(--os-color-input));
  --os-color-input-text: #f5f4f3;
  --os-color-placeholder: #a19f9d;

  --os-color-grid: var(--os-color-surface);
  /* Align with prior dark-contrast header paint (#323130) for zero visual drift */
  --os-color-grid-header: #323130;
  --os-color-grid-header-text: var(--os-color-text);
  --os-color-grid-body: var(--os-color-surface);
  --os-color-grid-footer: var(--os-color-surface-muted);
  --os-color-grid-totals: var(--os-color-surface-muted);
  --os-color-grid-alt-row: #2c2b2a;
  --os-color-grid-selected: color-mix(in srgb, var(--os-color-primary) 28%, var(--os-color-surface));
  --os-color-grid-focused: color-mix(in srgb, var(--os-color-primary) 18%, var(--os-color-surface));
  --os-color-grid-hover: #3a3938;
  --os-color-grid-filter: var(--os-color-surface-muted);
  --os-color-grid-pager: var(--os-color-surface);
  --os-color-grid-border: var(--os-color-border);
  --os-color-grid-icon: var(--os-color-text);
  --os-color-grid-icon-active: var(--os-color-primary-light);
  --os-color-grid-search: var(--os-color-surface-muted);
  --os-color-grid-group: var(--os-color-section-header);
  --os-color-grid-link: var(--os-color-link);
  --os-color-grid-empty: var(--os-color-text-muted);
  --os-color-grid-error-bg: color-mix(in srgb, var(--os-color-danger) 22%, var(--os-color-surface));
  --os-color-grid-error-text: var(--os-color-danger);
  --os-color-grid-load: var(--os-color-popup);
  --os-color-grid-chooser: var(--os-color-popup);
  --os-color-grid-menu: var(--os-color-menu);

  --os-color-button: var(--os-color-surface-muted);
  --os-color-button-text: var(--os-color-text);
  --os-color-button-primary: var(--os-color-primary);
  --os-color-button-primary-text: var(--os-color-text-inverse);
  --os-color-button-secondary: var(--os-color-surface-muted);
  --os-color-button-secondary-text: var(--os-color-text);
  --os-color-button-danger: var(--os-color-danger);
  --os-color-button-danger-text: var(--os-color-text-inverse);
  --os-color-button-success: var(--os-color-success);
  --os-color-button-success-text: #0b1f14;
  --os-color-button-warning: var(--os-color-warning);
  --os-color-button-warning-text: #1f1408;
  --os-color-button-disabled: color-mix(in srgb, var(--os-color-surface-muted) 80%, transparent);
  --os-color-button-disabled-text: var(--os-color-text-muted);
  --os-color-button-outline: transparent;
  --os-color-button-outline-text: var(--os-color-primary-light);

  --os-btn-text-ink: var(--os-color-text);
  --os-btn-text-on-fill: var(--os-color-text-inverse);
  --os-btn-text-muted: var(--os-color-text-muted);
  --os-btn-text-color: var(--os-btn-text-ink);
  --os-btn-border: var(--os-color-border-strong);
  --os-btn-border-hover: var(--os-color-primary-light);
  --os-btn-neutral-bg: var(--os-color-surface-muted);
  --os-btn-neutral-bg-hover: color-mix(in srgb, var(--os-color-primary) 24%, var(--os-color-surface-muted));
  --os-btn-neutral-bg-selected: color-mix(in srgb, var(--os-color-primary) 34%, var(--os-color-surface-muted));
  --os-btn-3d-neutral-bg: var(--os-btn-neutral-bg);
  --os-btn-3d-neutral-bg-hover: var(--os-btn-neutral-bg-hover);

  --os-color-checkbox-border: var(--os-color-border-strong);
  --os-color-checkbox-checked-bg: var(--os-color-primary);
  --os-color-checkbox-checked-border: var(--os-color-primary);
  --os-color-checkbox-checked-mark: var(--os-color-text-inverse);
  --os-color-radio-border: var(--os-color-border-strong);
  --os-color-radio-checked-bg: var(--os-color-primary);
  --os-color-radio-checked-dot: var(--os-color-text-inverse);

  --os-color-calendar-bg: var(--os-color-popup);
  --os-color-calendar-border: var(--os-color-border);
  --os-color-calendar-header: var(--os-color-section-header);
  --os-color-calendar-header-text: var(--os-color-text);
  --os-color-calendar-cell: transparent;
  --os-color-calendar-cell-text: var(--os-color-text);
  --os-color-calendar-cell-hover: var(--os-color-hover);
  --os-color-calendar-cell-selected: var(--os-color-primary);
  --os-color-calendar-cell-selected-text: var(--os-color-text-inverse);
  --os-color-calendar-cell-today: var(--os-color-accent);
  --os-color-calendar-cell-other: var(--os-color-text-muted);
  --os-color-datepicker: var(--os-color-input);

  --os-color-notification-info-bg: color-mix(in srgb, var(--os-color-info) 22%, var(--os-color-surface));
  --os-color-notification-success-bg: color-mix(in srgb, var(--os-color-success) 22%, var(--os-color-surface));
  --os-color-notification-warning-bg: color-mix(in srgb, var(--os-color-warning) 22%, var(--os-color-surface));
  --os-color-notification-danger-bg: color-mix(in srgb, var(--os-color-danger) 22%, var(--os-color-surface));

  --os-shell-accent: var(--os-color-accent);
  --os-shell-accent-soft: color-mix(in srgb, var(--os-color-accent) 16%, var(--os-color-surface));
  --os-shell-nav-hover: color-mix(in srgb, var(--os-color-accent) 18%, var(--os-color-surface));
  --os-shell-nav-active: color-mix(in srgb, var(--os-color-accent) 28%, var(--os-color-surface));
  --os-shell-nav-active-text: var(--os-color-text);

  --os-color-progress-track: var(--os-color-surface-muted);
  --os-color-progress-bar: var(--os-color-primary);
  --os-scroll-track: color-mix(in srgb, var(--os-color-surface) 70%, transparent);
  --os-scroll-thumb: color-mix(in srgb, var(--os-color-text-muted) 48%, transparent);
  --os-scroll-thumb-hover: color-mix(in srgb, var(--os-color-text-muted) 72%, transparent);
  --os-scroll-thumb-active: color-mix(in srgb, var(--os-color-accent) 55%, var(--os-color-text-muted));

  --os-section-border: var(--os-color-border);
  --os-section-bg: var(--os-color-surface);
  --os-section-header-bg: #2f2e2d;
  --os-section-header-text: var(--os-color-text);
  --os-section-shadow: 0 1px 3px rgba(0, 0, 0, 0.28);

  --os-hub-workspace-bg: color-mix(in srgb, var(--os-color-page-bg) 82%, var(--os-color-surface) 18%);
  --os-hub-panel-bg: var(--os-color-surface);
  --os-hub-panel-border: color-mix(in srgb, var(--os-color-border) 80%, var(--os-color-primary) 20%);
  --os-hub-panel-shadow: var(--os-color-shadow-md);
  --os-hub-title: var(--os-color-text);
  --os-hub-muted: var(--os-color-text-muted);
  --os-hub-accent-bar: var(--os-color-primary);
  --os-hub-icon-bg: color-mix(in srgb, var(--os-color-primary) 22%, var(--os-color-surface-muted));
  --os-hub-icon-color: var(--os-color-primary-light);
  --os-hub-header-bg: var(--os-color-surface);
  --os-hub-header-border: var(--os-color-border);

  --os-app-dropdown-bg: var(--os-color-dropdown);
  --os-app-dropdown-color: var(--os-color-text);
  --os-app-dropdown-muted: var(--os-color-text-muted);
  --os-app-dropdown-border: var(--os-color-border);
  --os-app-dropdown-hover-bg: var(--os-shell-accent-soft);
  --os-app-dropdown-shadow: var(--os-color-shadow-md);
  --os-app-control-bg: var(--os-color-surface-muted);
  --os-app-control-color: var(--os-color-text);
  --os-app-control-border: var(--os-color-border);
  --os-app-control-hover-bg: var(--os-shell-accent-soft);

  /* Popups / lookups follow dark theme */
  --os-popup-surface: var(--os-color-surface);
  --os-popup-border: var(--os-color-border);
  --os-popup-selection-ink: var(--os-color-text);
  --os-popup-checkbox-border: rgba(255, 255, 255, 0.55);
  --os-popup-checkbox-checked-fg: var(--os-btn-text-on-fill);
  --os-popup-checkbox-checked-bg: var(--os-color-primary);
  --os-popup-selection-hover-bg: color-mix(in srgb, var(--os-color-primary) 18%, var(--os-color-surface));
  --os-popup-selection-selected-bg: color-mix(in srgb, var(--os-color-primary) 28%, var(--os-color-surface));

  --os-module-ags-header: var(--os-color-header);
  --os-module-aps-header: var(--os-color-header);
  --os-module-prs-header: var(--os-color-header);
  --os-module-header-text: var(--os-color-text-inverse);

  --bs-body-bg: var(--os-color-page-bg);
  --bs-body-color: var(--os-color-text);
  --bs-border-color: var(--os-color-border);
  --bs-primary: var(--os-color-primary);
  --bs-link-color: var(--os-color-link);
  --bs-link-hover-color: var(--os-color-link-hover);
  --bs-secondary-color: var(--os-color-text-muted);
  --bs-tertiary-bg: var(--os-color-surface-muted);

  /* Remap DevExtreme Material light CSS variables so body-portaled overlays
     inherit dark surfaces instead of staying on #fff. */
  --dx-color-text: var(--os-color-text);
  --dx-color-icon: color-mix(in srgb, var(--os-color-text) 88%, transparent);
  --dx-color-spin-icon: color-mix(in srgb, var(--os-color-text) 88%, transparent);
  --dx-component-color-bg: var(--os-color-surface);
  --dx-color-main-bg: var(--os-color-surface);
  --dx-color-border: var(--os-color-border);
  --dx-color-separator: var(--os-color-border);
  --dx-color-shadow: #000000;
  --dx-texteditor-color-text: var(--os-color-input-text);
  --dx-texteditor-color-label: var(--os-color-text-muted);
  --dx-list-item-color: var(--os-color-text);
}

/* Short ERP aliases (map to Theme Engine tokens) */
html,
html[data-theme="light"],
html[data-theme="dark"],
body[data-theme="light"],
body[data-theme="dark"] {
  --bg: var(--os-color-page-bg);
  --surface: var(--os-color-surface);
  --panel: var(--os-color-panel);
  --toolbar: var(--os-color-toolbar);
  --header: var(--os-color-header);
  --sidebar: var(--os-color-sidebar);
  --card: var(--os-color-card);
  --border: var(--os-color-border);
  --input-bg: var(--os-color-form-control-bg);
  --input-text: var(--os-color-input-text);
  --input-border: var(--os-color-form-border);
  --button-bg: var(--os-color-button);
  --button-text: var(--os-color-button-text);
  --popup-bg: var(--os-color-popup);
  --popup-text: var(--os-color-text);
  --table-bg: var(--os-table-bg, var(--os-color-grid));
  --table-header: var(--os-table-header-bg, var(--os-color-grid-header));
  --table-border: var(--os-table-border, var(--os-color-border));
  --footer: var(--os-color-footer);
  --icon: var(--os-color-icon);
  --icon-muted: var(--os-color-icon-muted);
  --datepicker-bg: var(--os-color-datepicker);
  --calendar-bg: var(--os-color-calendar-bg);
  --notification-bg: var(--os-color-notification);
  --progress-track: var(--os-color-progress-track);
  --progress-bar: var(--os-color-progress-bar);

  /* ---- UI-1.1 semantic tokens (aliases only — no duplicate palettes) ---- */
  --os-bg: var(--os-color-page-bg);
  --os-surface: var(--os-color-surface);
  --os-surface-secondary: var(--os-color-surface-muted);
  --os-surface-elevated: var(--os-color-sidebar-elevated, var(--os-color-surface));
  --os-surface-alt: var(--os-color-surface-muted);
  --os-text: var(--os-color-text);
  --os-text-secondary: var(--os-color-text-muted);
  --os-text-muted: var(--os-color-text-muted);
  --os-border: var(--os-color-border);
  --os-border-strong: var(--os-color-border-strong);
  --os-input-bg: var(--os-color-form-control-bg);
  --os-input-text: var(--os-color-input-text);
  --os-input-border: var(--os-color-form-border);
  --os-input-placeholder: var(--os-color-placeholder);
  --os-input-hover-bg: var(--os-color-input-hover);
  --os-input-focus-bg: var(--os-color-input-focus);
  --os-input-focus-border: var(--os-color-focus-border);
  --os-input-focus-ring: var(--os-color-focus-ring);
  --os-input-readonly-bg: var(--os-color-input-readonly);
  --os-input-disabled-bg: var(--os-color-input-disabled);
  --os-input-error-bg: var(--os-color-input-error);
  --os-input-success-bg: var(--os-color-input-success);
  --os-hover: var(--os-color-hover);
  --os-active: var(--os-btn-neutral-bg-selected);
  --os-focus: var(--os-color-focus);
  --os-disabled: var(--os-color-input-disabled);
  --os-primary: var(--os-color-primary);
  --os-primary-text: var(--os-color-button-primary-text);
  --os-danger: var(--os-color-danger);
  --os-warning: var(--os-color-warning);
  --os-success: var(--os-color-success);
  --os-info: var(--os-color-info);
  --os-shadow: var(--os-color-shadow);
  --os-overlay: var(--os-color-overlay);

  /* ---- UI-1.5 / UI-1.14 stack layers (presentation only) ----
     chrome (28–40) < sidebar (~1040) < modal (1050–1055) < BS popover (1080)
     < mobile overlay (1200) < DX popup/popover/load (1500/1500/2000)
     < DX dropdown (3500) < context (4000) < elevated popup (16000)
     < dropdown-in-popup (17050) < report/toolbar menu (20050) < toast (20100).
     Do not blindly raise values — prefer aliases + :has() elevators (UI-1.5).
     Page-specific elevated popups (e.g. harvest 16000) keep their own rules. */
  --os-z-dropdown: 1050;
  --os-z-modal-backdrop: 1050;
  --os-z-modal: 1055;
  --os-z-popover: 1080;
  --os-z-dx-popup: 1500;
  --os-z-popup: var(--os-z-dx-popup);
  --os-z-dx-popover: 1500;
  --os-z-loadpanel: 2000;
  /* UI-1.4 DX SelectBox/TagBox/DateBox/header-filter overlays + context menus */
  --os-z-dropdown-overlay: 3500;
  --os-z-dropdown-header-filter: 3600;
  --os-z-dropdown-context: 4000;
  --os-z-popup-elevated: 16000;
  --os-z-dropdown-in-popup: 17050;
  --os-z-report-popup: 20050;
  --os-z-toolbar-menu: 20050;
  --os-z-toast: 20100;

  /* ---- UI-1.4 dropdown / select / popup color aliases ---- */
  --os-dropdown-bg: var(--os-color-dropdown);
  --os-dropdown-text: var(--os-color-text);
  --os-dropdown-border: var(--os-color-border);
  --os-dropdown-shadow: var(--os-color-shadow-md);
  --os-dropdown-hover: var(--os-popup-selection-hover-bg);
  --os-dropdown-selected: var(--os-popup-selection-selected-bg);

  /* ---- Global popup / modal / table contract (aliases only) ---- */
  --os-modal-bg: var(--os-color-modal);
  --os-modal-overlay: var(--os-color-overlay);
  --os-table-row: var(--os-table-body-bg, var(--os-color-grid-body));
  --os-table-row-hover: var(--os-table-hover-bg, var(--os-color-grid-hover));
  --os-table-header: var(--os-table-header-bg, var(--os-color-grid-header));

  /* ---- UI-1.8 HTML table tokens (aliases only — no duplicate palettes) ----
     Distinct from DX DataGrid surfaces; HTML tables consume these. */
  --os-table-bg: var(--os-color-grid);
  --os-table-header-bg: var(--os-color-grid-header);
  --os-table-header-text: var(--os-color-grid-header-text);
  --os-table-body-bg: var(--os-color-grid-body);
  --os-table-text: var(--os-color-text);
  --os-table-border: var(--os-color-border);
  --os-table-stripe-bg: var(--os-color-grid-alt-row);
  --os-table-hover-bg: var(--os-color-grid-hover);
  --os-table-selected-bg: var(--os-color-grid-selected);
  --os-table-footer-bg: var(--os-color-grid-footer);
  --os-table-empty-text: var(--os-color-text-muted);
  --os-table-loading-bg: var(--os-color-surface-muted);

  /* ---- UI-1.13 feedback state aliases (presentation only) ---- */
  --os-state-success: var(--os-success);
  --os-state-warning: var(--os-warning);
  --os-state-danger: var(--os-danger);
  --os-state-info: var(--os-info);
  --os-state-empty-text: var(--os-table-empty-text);
  --os-state-loading-bg: var(--os-table-loading-bg);
}