/* =============================================================
   Theme tokens - the one place theme colours are defined.

   Token-only: no component selectors here. The active theme is the
   data-bs-theme (and data-theme) attribute on <html>, set before first
   paint by the inline bootstrap in _Layout.cshtml and afterwards only by
   app/base/theme-switcher.js.

   Layers:
   1. --app-*    semantic tokens (backgrounds, surfaces, text, borders,
                 inputs, navigation, overlays, states). Components use these.
                 Light values are the ones the app already rendered with.
   2. Aliases    the other variable families already in the codebase -
                 Bootstrap's --bs-*, the shadcn-style tokens in
                 css/react-sidebar-bridge.css, the sidebar --synx-* tokens in
                 app/base/layout.css and the structural tokens in
                 app/base/tokens.css - read layer 1, so there is one palette
                 rather than three.
   3. --theme-*  hooks for styles written with literal light colours. A rule
                 writes `color: var(--theme-text, #0f172a)`: the literal is
                 its untouched light value, the dark theme supplies the
                 token. They are reset to `initial` (= use the literal) in
                 the light themes, so a light-scoped container nested in a
                 dark page stays light.
   ============================================================= */

/* ---------- Light (default) ---------- */
:root,
[data-bs-theme="light"] {
    color-scheme: light;

    /* Brand */
    --app-primary: #2563eb;
    --app-primary-hover: #0b5ed7;
    --app-primary-text: #2563eb;          /* brand blue used as text/links */
    --app-primary-text-on-tint: #1d4ed8;  /* blue text on --app-primary-subtle */
    --app-on-primary: #ffffff;
    --app-primary-subtle: #eff6ff;        /* selected / active tint        */

    /* Backgrounds and surfaces */
    --app-bg: #f5f7fa;                    /* page canvas                   */
    --app-card: #ffffff;                  /* cards, panels, tables         */
    --app-elevated: #ffffff;              /* menus, popovers, modals       */
    --app-surface-muted: #f8fafc;         /* table heads, wells            */
    --app-surface-subtle: #f1f5f9;        /* chips, hover rows             */

    /* Text */
    --app-text: var(--bs-body-color);
    --app-text-strong: #0f172a;
    --app-text-secondary: #334155;
    --app-muted: #6c757d;
    --app-text-disabled: #94a3b8;

    /* Borders */
    --app-border: var(--bs-border-color);
    --app-border-strong: #cbd5e1;

    /* Interaction */
    --app-hover: #f1f5f9;
    --app-focus: #2563eb;
    --app-focus-ring: 0 0 0 3px rgba(37, 99, 235, .25);

    /* Toggle switches (app/components/toggle.css) */
    --app-toggle-on: var(--app-primary);
    --app-toggle-off: var(--app-border-strong);
    --app-toggle-knob: linear-gradient(180deg, #ffffff 0%, #eef1f5 100%);
    --app-toggle-knob-shadow: 0 1px 2px rgba(15, 23, 42, .22), 0 3px 8px rgba(15, 23, 42, .14);
    --app-toggle-track-shadow: inset 0 1px 3px rgba(15, 23, 42, .2);

    /* Button hover gradients (app/components/button-hover.css) */
    --app-btn-grad-primary: linear-gradient(120deg, #1e40af 0%, #0ea5e9 50%, #1e40af 100%);
    --app-btn-grad-danger: linear-gradient(120deg, #be123c 0%, #fb7185 50%, #be123c 100%);
    --app-btn-grad-success: linear-gradient(120deg, #047857 0%, #14b8a6 50%, #047857 100%);
    --app-btn-grad-warning: linear-gradient(120deg, #ea580c 0%, #f59e0b 50%, #ea580c 100%);
    --app-btn-grad-info: linear-gradient(120deg, #0369a1 0%, #38bdf8 50%, #0369a1 100%);
    --app-btn-grad-dark: linear-gradient(120deg, #0f172a 0%, #1e40af 50%, #0f172a 100%);
    --app-btn-grad-soft: linear-gradient(120deg, rgba(37, 99, 235, .05) 0%, rgba(14, 165, 233, .18) 50%, rgba(37, 99, 235, .05) 100%);
    --app-btn-glow-primary: 0 8px 20px -8px rgba(37, 99, 235, .55);
    --app-btn-glow-danger: 0 8px 20px -8px rgba(225, 29, 72, .55);
    --app-btn-glow-success: 0 8px 20px -8px rgba(13, 148, 136, .55);
    --app-btn-glow-warning: 0 8px 20px -8px rgba(249, 115, 22, .55);
    --app-btn-glow-info: 0 8px 20px -8px rgba(14, 165, 233, .55);
    --app-btn-glow-dark: 0 8px 20px -8px rgba(15, 23, 42, .55);
    --app-btn-glow-soft: 0 6px 16px -8px rgba(37, 99, 235, .3);
    /* White and light buttons (outline, secondary, light, ghost): an opaque
       pale-blue sweep that reads clearly over a white surface, with dark text. */
    --app-btn-grad-light: linear-gradient(120deg, #eff6ff 0%, #bfdbfe 50%, #eff6ff 100%);
    --app-btn-glow-light: 0 8px 18px -8px rgba(37, 99, 235, .45);

    /* Card hover shimmer (app/components/card-shimmer.css): a faint brand-blue
       sheen, since a white band would not show on white cards. */
    --app-card-shimmer: rgba(59, 130, 246, .10);

    /* Inputs */
    --app-input-bg: #ffffff;
    --app-input-text: #212529;
    --app-input-border: #d1d5db;
    --app-input-placeholder: #6b7280;
    --app-input-disabled-bg: #f3f4f6;

    /* Navigation (sidebar + top bar) */
    --app-nav-bg: #fafafa;
    --app-nav-text: #3a3a3a;              /* group labels                  */
    --app-nav-text-secondary: #555555;    /* links                         */
    --app-nav-hover: #f2f2f2;
    --app-nav-active-bg: #eff6ff;
    --app-nav-active-text: #2563eb;
    --app-nav-border: #e5e7eb;

    /* Overlays */
    --app-overlay: rgba(15, 23, 42, .45);

    /* States: solid colour, subtle background, text on the subtle background */
    --app-success: #16a34a;
    --app-success-subtle: #dcfce7;
    --app-success-text: #166534;
    --app-warning: #d97706;
    --app-warning-subtle: #fef3c7;
    --app-warning-text: #92400e;
    --app-danger: #dc2626;
    --app-danger-subtle: #fee2e2;
    --app-danger-text: #991b1b;
    --app-info: #0ea5e9;
    --app-info-subtle: #e0f2fe;
    --app-info-text: #075985;
    --app-accent-subtle: #f5f3ff;
    --app-accent-text: #6d28d9;

    /* Tinted borders that accompany the subtle backgrounds */
    --app-primary-border: #bfdbfe;
    --app-success-border: #bbf7d0;
    --app-warning-border: #fde68a;
    --app-danger-border: #fecaca;
    --app-info-border: #bae6fd;
    --app-accent-border: #ddd6fe;

    /* Legacy --app-* names (bridge.css, site.css, tokens.css) */
    --app-surface: var(--bs-body-bg);
    --app-surface-1: #ffffff;
    --app-surface-2: #ffffff;
    --app-hover-light: rgba(0, 0, 0, .06);
    --app-hover-dark: rgba(255, 255, 255, .08);
    --app-navbar-bg: var(--bs-body-bg);
    --app-navbar-fg: var(--bs-body-color);
    --app-sidebar-bg: #f8f9fa;
    --app-sidebar-fg: #212529;
    --app-sidebar-active-bg: #e9ecef;
    --app-sidebar-active-fg: var(--bs-primary);

    /* Bootstrap - unchanged light values */
    --bs-body-bg: #ffffff;
    --bs-body-color: #212529;
    --bs-tertiary-bg: #f8f9fa;
    --bs-border-color: #dee2e6;
    --bs-primary: #3b82f6;
    --bs-link-color: var(--bs-primary);

    /* Literal-colour hooks: the light theme uses each rule's own literal */
    --theme-bg: initial;
    --theme-surface: initial;
    --theme-surface-muted: initial;
    --theme-surface-subtle: initial;
    --theme-elevated: initial;
    --theme-text: initial;
    --theme-text-secondary: initial;
    --theme-muted: initial;
    --theme-border: initial;
    --theme-border-strong: initial;
    --theme-primary-subtle: initial;
    --theme-primary-text: initial;
    --theme-success-subtle: initial;
    --theme-success-text: initial;
    --theme-warning-subtle: initial;
    --theme-warning-text: initial;
    --theme-danger-subtle: initial;
    --theme-danger-text: initial;
    --theme-info-subtle: initial;
    --theme-info-text: initial;
    --theme-accent-subtle: initial;
    --theme-accent-text: initial;
    --theme-primary-border: initial;
    --theme-success-border: initial;
    --theme-warning-border: initial;
    --theme-danger-border: initial;
    --theme-info-border: initial;
    --theme-accent-border: initial;
}

/* ---------- Dark ---------- */
[data-bs-theme="dark"] {
    color-scheme: dark;

    --app-primary: #2563eb;               /* fills keep the brand blue     */
    --app-primary-hover: #3b82f6;
    --app-primary-text: #60a5fa;          /* 5.6:1 on cards                */
    --app-primary-text-on-tint: #93c5fd;  /* ~7:1 on the blue tint; #60a5fa drops to ~4:1 there */
    --app-on-primary: #ffffff;            /* 5.2:1 on the brand blue       */
    --app-primary-subtle: rgba(59, 130, 246, .18);

    --app-bg: #0f172a;
    --app-card: #1e293b;
    --app-elevated: #263449;
    --app-surface-muted: #172135;
    --app-surface-subtle: #263449;

    --app-text: #f8fafc;                  /* 13.9:1 on cards               */
    --app-text-strong: #ffffff;
    --app-text-secondary: #cbd5e1;        /* 10.2:1 on cards               */
    --app-muted: #94a3b8;                 /* 5.7:1 on cards, 4.6 on elevated */
    --app-text-disabled: #64748b;

    --app-border: #334155;
    --app-border-strong: #475569;

    --app-hover: #334155;
    --app-focus: #60a5fa;
    --app-focus-ring: 0 0 0 3px rgba(96, 165, 250, .5);

    --app-toggle-on: var(--app-primary);
    --app-toggle-off: var(--app-border-strong);
    --app-toggle-knob: linear-gradient(180deg, #f8fafc 0%, #d9dee7 100%);
    --app-toggle-knob-shadow: 0 1px 2px rgba(0, 0, 0, .45), 0 3px 8px rgba(0, 0, 0, .35);
    --app-toggle-track-shadow: inset 0 1px 3px rgba(0, 0, 0, .45);

    --app-btn-grad-primary: linear-gradient(120deg, #1e40af 0%, #0ea5e9 50%, #1e40af 100%);
    --app-btn-grad-danger: linear-gradient(120deg, #be123c 0%, #fb7185 50%, #be123c 100%);
    --app-btn-grad-success: linear-gradient(120deg, #047857 0%, #14b8a6 50%, #047857 100%);
    --app-btn-grad-warning: linear-gradient(120deg, #ea580c 0%, #f59e0b 50%, #ea580c 100%);
    --app-btn-grad-info: linear-gradient(120deg, #0369a1 0%, #38bdf8 50%, #0369a1 100%);
    --app-btn-grad-dark: linear-gradient(120deg, #1e293b 0%, #2563eb 50%, #1e293b 100%);
    --app-btn-grad-soft: linear-gradient(120deg, rgba(59, 130, 246, .12) 0%, rgba(56, 189, 248, .3) 50%, rgba(59, 130, 246, .12) 100%);
    --app-btn-glow-primary: 0 8px 22px -8px rgba(59, 130, 246, .65);
    --app-btn-glow-danger: 0 8px 22px -8px rgba(244, 63, 94, .6);
    --app-btn-glow-success: 0 8px 22px -8px rgba(20, 184, 166, .6);
    --app-btn-glow-warning: 0 8px 22px -8px rgba(251, 146, 60, .6);
    --app-btn-glow-info: 0 8px 22px -8px rgba(56, 189, 248, .6);
    --app-btn-glow-dark: 0 8px 22px -8px rgba(0, 0, 0, .7);
    --app-btn-glow-soft: 0 6px 18px -8px rgba(59, 130, 246, .45);
    --app-btn-grad-light: linear-gradient(120deg, rgba(59, 130, 246, .2) 0%, rgba(56, 189, 248, .45) 50%, rgba(59, 130, 246, .2) 100%);
    --app-btn-glow-light: 0 8px 20px -8px rgba(59, 130, 246, .6);

    --app-card-shimmer: rgba(148, 197, 255, .08);

    --app-input-bg: #1e293b;
    --app-input-text: #f8fafc;
    --app-input-border: #718096;          /* 3.6:1 non-text contrast       */
    --app-input-placeholder: #94a3b8;
    --app-input-disabled-bg: #172135;

    --app-nav-bg: #111827;
    --app-nav-text: #f8fafc;
    --app-nav-text-secondary: #cbd5e1;
    --app-nav-hover: #1e293b;
    --app-nav-active-bg: rgba(59, 130, 246, .2);
    --app-nav-active-text: #93c5fd;
    --app-nav-border: #1f2937;

    --app-overlay: rgba(2, 6, 23, .7);

    --app-success: #22c55e;
    --app-success-subtle: rgba(34, 197, 94, .16);
    --app-success-text: #86efac;
    --app-warning: #f59e0b;
    --app-warning-subtle: rgba(245, 158, 11, .16);
    --app-warning-text: #fcd34d;
    --app-danger: #ef4444;
    --app-danger-subtle: rgba(239, 68, 68, .16);
    --app-danger-text: #fca5a5;
    --app-info: #38bdf8;
    --app-info-subtle: rgba(56, 189, 248, .16);
    --app-info-text: #7dd3fc;
    --app-accent-subtle: rgba(139, 92, 246, .18);
    --app-accent-text: #c4b5fd;

    --app-primary-border: rgba(96, 165, 250, .4);
    --app-success-border: rgba(34, 197, 94, .4);
    --app-warning-border: rgba(245, 158, 11, .4);
    --app-danger-border: rgba(239, 68, 68, .4);
    --app-info-border: rgba(56, 189, 248, .4);
    --app-accent-border: rgba(139, 92, 246, .45);

    --app-surface: var(--app-bg);
    --app-surface-1: var(--app-card);
    --app-surface-2: var(--app-card);
    --app-navbar-bg: var(--app-nav-bg);
    --app-navbar-fg: var(--app-nav-text);
    --app-sidebar-bg: var(--app-nav-bg);
    --app-sidebar-fg: var(--app-nav-text);
    --app-sidebar-active-bg: var(--app-nav-active-bg);
    --app-sidebar-active-fg: var(--app-nav-active-text);

    /* Bootstrap 5.3 - the variables its components read in dark mode */
    --bs-body-bg: var(--app-bg);
    --bs-body-bg-rgb: 15, 23, 42;
    --bs-body-color: var(--app-text);
    --bs-body-color-rgb: 248, 250, 252;
    --bs-emphasis-color: #ffffff;
    --bs-emphasis-color-rgb: 255, 255, 255;
    --bs-secondary-color: var(--app-muted);
    --bs-secondary-bg: var(--app-card);
    --bs-secondary-bg-rgb: 30, 41, 59;
    --bs-tertiary-color: var(--app-muted);
    --bs-tertiary-bg: var(--app-surface-muted);
    --bs-tertiary-bg-rgb: 23, 33, 53;
    --bs-heading-color: var(--app-text);
    --bs-border-color: var(--app-border);
    --bs-border-color-translucent: rgba(148, 163, 184, .2);
    --bs-primary: #3b82f6;
    --bs-primary-rgb: 59, 130, 246;
    --bs-link-color: var(--app-primary-text);
    --bs-link-color-rgb: 96, 165, 250;
    --bs-link-hover-color: #93c5fd;
    --bs-link-hover-color-rgb: 147, 197, 253;
    --bs-primary-text-emphasis: #93c5fd;
    --bs-primary-bg-subtle: var(--app-primary-subtle);
    --bs-primary-border-subtle: #1e40af;
    --bs-success-text-emphasis: var(--app-success-text);
    --bs-success-bg-subtle: var(--app-success-subtle);
    --bs-warning-text-emphasis: var(--app-warning-text);
    --bs-warning-bg-subtle: var(--app-warning-subtle);
    --bs-danger-text-emphasis: var(--app-danger-text);
    --bs-danger-bg-subtle: var(--app-danger-subtle);
    --bs-info-text-emphasis: var(--app-info-text);
    --bs-info-bg-subtle: var(--app-info-subtle);
    --bs-light-bg-subtle: var(--app-surface-subtle);
    --bs-light-text-emphasis: var(--app-text-secondary);
    --bs-secondary-bg-subtle: var(--app-surface-subtle);
    --bs-secondary-text-emphasis: var(--app-text-secondary);
    --bs-form-valid-color: var(--app-success-text);
    --bs-form-invalid-color: var(--app-danger-text);

    --theme-bg: var(--app-bg);
    --theme-surface: var(--app-card);
    --theme-surface-muted: var(--app-surface-muted);
    --theme-surface-subtle: var(--app-surface-subtle);
    --theme-elevated: var(--app-elevated);
    --theme-text: var(--app-text);
    --theme-text-secondary: var(--app-text-secondary);
    --theme-muted: var(--app-muted);
    --theme-border: var(--app-border);
    --theme-border-strong: var(--app-border-strong);
    --theme-primary-subtle: var(--app-primary-subtle);
    --theme-primary-text: var(--app-primary-text-on-tint);
    --theme-success-subtle: var(--app-success-subtle);
    --theme-success-text: var(--app-success-text);
    --theme-warning-subtle: var(--app-warning-subtle);
    --theme-warning-text: var(--app-warning-text);
    --theme-danger-subtle: var(--app-danger-subtle);
    --theme-danger-text: var(--app-danger-text);
    --theme-info-subtle: var(--app-info-subtle);
    --theme-info-text: var(--app-info-text);
    --theme-accent-subtle: var(--app-accent-subtle);
    --theme-accent-text: var(--app-accent-text);
    --theme-primary-border: var(--app-primary-border);
    --theme-success-border: var(--app-success-border);
    --theme-warning-border: var(--app-warning-border);
    --theme-danger-border: var(--app-danger-border);
    --theme-info-border: var(--app-info-border);
    --theme-accent-border: var(--app-accent-border);
}

/* ---------- Dark: aliases for component-scoped palettes ----------
   The shadcn-style tokens are read by css/react-sidebar-bridge.css (the
   sidebar and shell) and a few pages; --at-* by css/app-table.css. Both
   files declare their light values on :root, after this file, and the
   bridge still carries an older dark palette under html[data-bs-theme="dark"].
   :root[data-bs-theme="dark"] outranks both, so the palette above is the
   one that applies. */
:root[data-bs-theme="dark"] {
    --background: var(--app-bg);
    --foreground: var(--app-text);
    --card: var(--app-card);
    --card-foreground: var(--app-text);
    --popover: var(--app-elevated);
    --popover-foreground: var(--app-text);
    --primary: var(--app-primary);
    --primary-foreground: var(--app-on-primary);
    --secondary: var(--app-surface-subtle);
    --secondary-foreground: var(--app-text);
    --muted: var(--app-surface-subtle);
    --muted-foreground: var(--app-muted);
    --accent: var(--app-hover);
    --accent-foreground: var(--app-text);
    --destructive: var(--app-danger);
    --destructive-foreground: #ffffff;
    --border: var(--app-border);
    --input: var(--app-input-border);
    --input-background: var(--app-input-bg);
    --switch-background: var(--app-border-strong);
    /* css/design-button.css (.app-btn) */
    --fg-text: var(--app-text);
    --fg-muted: var(--app-muted);
    --fg-border: var(--app-border);
    --ring: var(--app-focus);
    --sidebar: var(--app-nav-bg);
    --sidebar-foreground: var(--app-nav-text);
    --sidebar-primary: var(--app-primary);
    --sidebar-primary-foreground: var(--app-on-primary);
    --sidebar-accent: var(--app-nav-hover);
    --sidebar-accent-foreground: var(--app-nav-text);
    --sidebar-border: var(--app-nav-border);
    --sidebar-ring: var(--app-focus);

    /* css/app-table.css (tables, DataTables, pagers, badges) */
    --at-card: var(--app-card);
    --at-text: var(--app-text);
    --at-muted: var(--app-muted);
    --at-head: var(--app-text-secondary);
    --at-border: var(--app-border);
    --at-row-border: rgba(51, 65, 85, .7);
    --at-row-hover: rgba(255, 255, 255, .03);
    --at-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .25);
    --at-control-border: var(--app-input-border);
    --at-control-hover: var(--app-hover);
    --at-green-bg: var(--app-success-subtle);
    --at-green-text: var(--app-success-text);
    --at-yellow-bg: var(--app-warning-subtle);
    --at-yellow-text: var(--app-warning-text);
    --at-red-bg: var(--app-danger-subtle);
    --at-red-text: var(--app-danger-text);
    --at-blue-bg: var(--app-primary-subtle);
    --at-blue-text: #93c5fd;
    --at-grey-bg: var(--app-surface-subtle);
    --at-grey-text: var(--app-text-secondary);

    /* Page-local palettes. These views declare light values on :root in an
       inline <style> and paint html, body and .synx-main with them, so in
       dark mode the page sat on a light canvas with light-on-light text.
       This selector outranks their :root, wherever the <style> sits. */
    /* Employee Profile */
    --figma-bg: var(--app-bg);
    --figma-card-bg: var(--app-card);
    --figma-border: var(--app-border);
    --figma-border-subtle: var(--app-border);
    --figma-text-dark: var(--app-text);
    --figma-text-muted: var(--app-muted);
    --figma-text-label: var(--app-text-secondary);
    --figma-input-bg: var(--app-input-bg);
    /* Attendance */
    --att-page-bg: var(--app-bg);
    --fg-foreground: var(--app-text);
    --fg-card: var(--app-card);
    --fg-input-bg: var(--app-input-bg);
    --fg-gray-900: var(--app-text);
    --fg-gray-600: var(--app-text-secondary);
    --fg-gray-500: var(--app-muted);
    --fg-gray-400: var(--app-muted);
    /* Employee Access, Departments (WorkforceMobility) */
    --dg-page-bg: var(--app-bg);
    --fg-shadow: 0 1px 2px rgba(0, 0, 0, .3);
    --fg-shadow-hover: 0 10px 15px rgba(0, 0, 0, .35);
    /* Recruitment */
    --rx-bg: var(--app-card);
    --rx-border: var(--app-border);
    --rx-divider: var(--app-border);
    --rx-surface: var(--app-surface-muted);
    --rx-text: var(--app-text);
    --rx-muted: var(--app-muted);
    --rx-muted2: var(--app-muted);
    --rx-shadow: 0 8px 24px rgba(0, 0, 0, .3);
    --pill-open-bg: var(--app-success-subtle);
    --pill-open-fg: var(--app-success-text);
    --pill-urgent-bg: var(--app-danger-subtle);
    --pill-urgent-fg: var(--app-danger-text);
    --pill-ai-bg: var(--app-accent-subtle);
    --pill-ai-fg: var(--app-accent-text);
    --pill-outline-br: var(--app-border-strong);
    --pill-outline-fg: var(--app-text-secondary);
    --btn-br: var(--app-border);
    --btn-hover: var(--app-hover);
    /* Calendar */
    --page-bg: var(--app-bg);
    /* Employees */
    --emp-page-bg: var(--app-bg);
    --emp-surface: var(--app-card);
    --emp-border: var(--app-border);
    --emp-border-strong: var(--app-border-strong);
    --emp-text: var(--app-text);
    --emp-muted: var(--app-muted);
    --emp-muted-light: var(--app-muted);
    --emp-header-grad: linear-gradient(90deg, var(--app-surface-muted), var(--app-card));
    --emp-shadow: 0 1px 2px rgba(0, 0, 0, .3);
    /* Leave Management, My Leave (css/leave-management.css) */
    --lm-bg: var(--app-bg);
    --lm-card: var(--app-card);
    --lm-text: var(--app-text);
    --lm-muted: var(--app-muted);
    --lm-border: var(--app-border);
    --lm-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .25);
    --lm-green-bg: var(--app-success-subtle);
    --lm-green-text: var(--app-success-text);
    --lm-yellow-bg: var(--app-warning-subtle);
    --lm-yellow-text: var(--app-warning-text);
    --lm-red-bg: var(--app-danger-subtle);
    --lm-red-text: var(--app-danger-text);
    --lm-progress-track: var(--app-surface-subtle);
    --lm-progress-fill: var(--app-primary);
    /* Document Library, Portal and Upload (Documents module views) */
    --doc-bg: var(--app-bg);
    --doc-surface: var(--app-card);
    --doc-border: var(--app-border);
    --doc-border-soft: var(--app-border);
    --doc-text: var(--app-text);
    --doc-dark: var(--app-text);
    --doc-text-soft: var(--app-muted);
    --doc-text-muted: var(--app-muted);
    --doc-shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);
    --doc-shadow-md: 0 10px 24px rgba(0, 0, 0, .3);
    /* Workforce Mobility admin */
    --bg1: var(--app-bg);
    --bg2: var(--app-card);
    --ink: var(--app-text);
    --pill: var(--app-primary-subtle);
    --pill-ink: var(--app-primary-text);
    /* Engagement (css/tailwind-util.css, css/figma-style.css) */
    --bg: var(--app-card);
    --fg: var(--app-text);
    --muted-2: var(--app-text-secondary);
    --gray-50: var(--app-surface-muted);
    --gray-100: var(--app-surface-subtle);
    --gray-200: var(--app-border);
    --gray-400: var(--app-muted);
    --gray-500: var(--app-muted);
    --gray-600: var(--app-text-secondary);
    --gray-700: var(--app-text-secondary);
    --gray-900: var(--app-text);
    --blue-50: var(--app-primary-subtle);
    --blue-100: var(--app-primary-subtle);
    --green-50: var(--app-success-subtle);
    --green-100: var(--app-success-subtle);
    --teal-50: var(--app-success-subtle);
    --purple-50: var(--app-accent-subtle);
    --purple-100: var(--app-accent-subtle);
    --amber-50: var(--app-warning-subtle);
    --amber-100: var(--app-warning-subtle);
    --amber-600: var(--app-warning-text);
    --pink-100: rgba(236, 72, 153, .16);
    --orange-50: var(--app-warning-subtle);
    --orange-100: var(--app-warning-subtle);
    --red-100: var(--app-danger-subtle);
    --color-gray-100: var(--app-surface-subtle);
    --color-gray-200: var(--app-border);
    --color-gray-600: var(--app-text-secondary);
    --color-gray-900: var(--app-text);
    /* css/design-button.css */
    --fg-border-soft: var(--app-border);
}

/* ---------- Calm (light-based; brand and sidebar differ) ---------- */
[data-bs-theme="calm"] {
    color-scheme: light;
    --bs-body-bg: #f6f7f6;
    --bs-body-color: #1f2937;
    --bs-tertiary-bg: #eef1f1;
    --bs-border-color: #d6dadd;
    --bs-primary: #2aa198;
    --bs-link-color: var(--bs-primary);
    --app-surface: var(--bs-body-bg);
    --app-surface-2: #ffffff;
    --app-text: var(--bs-body-color);
    --app-muted: #60738a;
    --app-border: var(--bs-border-color);
    --app-navbar-bg: var(--bs-body-bg);
    --app-navbar-fg: var(--bs-body-color);
    --app-sidebar-bg: #0b1a26; /* calm sidebar look */
    --app-sidebar-fg: #dbe6ec;
    --app-sidebar-active-bg: #123044;
    --app-sidebar-active-fg: #7fc4ff;
    /* carried over from the calm block that used to sit in site.css */
    --app-bg: #0e1116;
    --app-surface-1: #131a22;
    --app-input-bg: #0f141b;
    --app-input-text: #e7edf6;
}