/* Product design tokens + the Bootstrap theme mapping.
   The product palette below is the single source of truth; the --bs-* block
   re-skins Bootstrap's own variables (palette, subtle tints, components) so
   stock Bootstrap markup (btn, badge, alert, card, table, forms) renders in
   the product's Fluent/MS365 language. */
:root {
    color-scheme: light;
    /* Color primitives */
    --color-blue: #0f6cbd;
    --color-blue-hover: #115ea3;
    --color-blue-active: #0c3b5e;
    --color-teal: #038387;
    --color-purple: #5c2d91;
    --color-orange: #d83b01;
    --color-green: #107c10;
    --color-red: #a4262c;
    --color-warning: #f7630c;

    --color-canvas: #f5f5f5;
    --color-surface: #fff;
    --color-surface-muted: #faf9f8;
    --color-surface-hover: #f3f2f1;
    --color-surface-selected: #edebe9;
    --color-surface-hover-strong: #e1dfdd;
    --color-surface-pressed: #c8c6c4;
    --color-nav: #f3f2f1;
    --color-nav-hover: #e9e9e9;

    --color-text: #242424;
    --color-text-secondary: #323130;
    --color-text-muted: #616161;
    --color-on-primary: #fff;
    --color-border: #e1dfdd;
    --color-border-strong: #8a8886;
    --color-border-subtle: #edebe9;
    --color-disabled: #a19f9d;

    --color-primary: var(--color-blue);
    --color-primary-hover: var(--color-blue-hover);
    --color-primary-active: var(--color-blue-active);
    /* Top suite-bar accent. In light mode it matches the brand blue; dark mode
       gets its own distinct shade below (stays an accent, not charcoal). */
    --color-suite-bar: #0f6cbd;
    --color-success: var(--color-green);
    --color-success-bg: #dff6dd;
    --color-success-border: #9fd89f;
    --color-warning-bg: #fff4ce;
    --color-danger: var(--color-red);
    --color-danger-bg: #fde7e9;
    /* Soft info wash shared by info badges and alerts. */
    --color-info-bg: #deecf9;

    /* Typography */
    --font-family-body: "Segoe UI", SegoeUI, -apple-system, BlinkMacSystemFont,
        "Helvetica Neue", Arial, sans-serif;
    --font-size-xs: .75rem;
    --font-size-sm: .8125rem;
    --font-size-md: .875rem;
    --font-size-base: 1rem;
    --font-size-h3: 1.75rem;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --line-height-tight: 1.2;
    --line-height-body: 1.45;

    /* Spacing and dimensions */
    --space-1: .25rem;
    --space-2: .5rem;
    --space-3: .75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --control-height: 36px;
    --control-height-sm: 30px;
    --control-padding-x: 16px;
    --control-padding-x-sm: 9px;
    --panel-padding: 22px 24px;
    --panel-padding-compact: 20px 22px;
    --suite-bar-height: 48px;
    --workspace-nav-width: 232px;
    --workspace-nav-collapsed-width: 68px;
    --content-width: 1420px;
    --support-content-width: 1640px;

    /* Radius scale */
    --radius-xs: 2px;
    --radius-sm: 3px;
    --radius-md: 4px;
    --radius-lg: 8px;
    --radius-round: 50%;

    /* Elevation */
    --shadow-card: 0 1.6px 3.6px rgba(0, 0, 0, .13),
        0 .3px .9px rgba(0, 0, 0, .11);
    --shadow-card-hover: 0 3.2px 7.2px rgba(0, 0, 0, .13),
        0 .6px 1.8px rgba(0, 0, 0, .11);
    --shadow-panel: var(--shadow-card);
    --shadow-overlay: 0 8px 24px rgba(0, 0, 0, .18);

    /* Z-index layers */
    --z-suite-bar: 1035;
    --z-overlay: 1050;
    --z-toast: 1090;

    /* ------------------------------------------------------------------
       Bootstrap theme mapping (document defaults, palette, subtle tints).
       Stock Bootstrap components read these variables, so the framework
       renders with the product look and dark mode flips in one place. */
    --bs-body-font-family: var(--font-family-body);
    --bs-body-color: var(--color-text);
    --bs-body-color-rgb: 36, 36, 36;
    --bs-body-bg: var(--color-canvas);
    --bs-body-bg-rgb: 245, 245, 245;
    --bs-secondary-color: var(--color-text-muted);
    --bs-secondary-bg: var(--color-surface-hover);
    --bs-secondary-bg-rgb: 243, 242, 241;
    --bs-tertiary-color: var(--color-text-muted);
    --bs-tertiary-bg: var(--color-surface-muted);
    --bs-heading-color: var(--color-text);
    --bs-emphasis-color: var(--color-text);
    --bs-emphasis-color-rgb: 36, 36, 36;

    --bs-primary: var(--color-primary);
    --bs-primary-rgb: 15, 108, 189;
    --bs-primary-text-emphasis: var(--color-primary);
    --bs-primary-bg-subtle: var(--color-info-bg);
    --bs-primary-border-subtle: var(--color-primary);
    --bs-link-color: var(--color-primary);
    --bs-link-color-rgb: 15, 108, 189;
    --bs-link-hover-color: var(--color-primary-hover);
    --bs-link-hover-color-rgb: 17, 94, 163;

    --bs-border-color: var(--color-border);
    --bs-border-color-translucent: var(--color-border-subtle);
    --bs-border-radius: var(--radius-xs);
    --bs-border-radius-sm: var(--radius-xs);
    --bs-border-radius-lg: var(--radius-md);
    --bs-border-radius-xl: var(--radius-lg);
    --bs-border-radius-2xl: var(--radius-lg);
    --bs-border-radius-pill: 10px;

    /* Semantic palette + the "soft badge/alert" tints Bootstrap derives from
       them. Values mirror the Fluent badge/alert washes the kit has always
       used (see components.css variant theming). */
    --bs-success: var(--color-success);
    --bs-success-rgb: 16, 124, 16;
    --bs-success-text-emphasis: #0e700e;
    --bs-success-bg-subtle: #f1faf1;
    --bs-success-border-subtle: var(--color-success-border);
    --bs-danger: var(--color-danger);
    --bs-danger-rgb: 164, 38, 44;
    --bs-danger-text-emphasis: var(--color-danger);
    --bs-danger-bg-subtle: var(--color-danger-bg);
    --bs-danger-border-subtle: var(--color-danger);
    --bs-warning: var(--color-warning);
    --bs-warning-rgb: 247, 99, 12;
    --bs-warning-text-emphasis: #8a3707;
    --bs-warning-bg-subtle: var(--color-warning-bg);
    --bs-warning-border-subtle: var(--color-warning);
    --bs-info: var(--color-primary);
    --bs-info-rgb: 15, 108, 189;
    --bs-info-text-emphasis: var(--color-primary-active);
    --bs-info-bg-subtle: var(--color-info-bg);
    --bs-info-border-subtle: var(--color-primary);
    --bs-secondary-text-emphasis: var(--color-text-muted);
    --bs-secondary-border-subtle: var(--color-border);
    --bs-dark-text-emphasis: var(--color-text-secondary);

    /* Focus ring: thin Fluent outline instead of Bootstrap's wide glow. */
    --bs-focus-ring-width: 2px;
    --bs-focus-ring-color: rgba(15, 108, 189, .25);
}

/* Dark mode follows the Microsoft 365 / Fluent UI dark language: the suite bar
   keeps its own saturated blue accent (#0277d3, distinct from light mode)
   like Outlook's blue title bar in dark mode, while the canvas, rails, and
   cards move to warm-charcoal surfaces (#11100f / #1b1a19 / #252423) with
   softened borders and a lighter blue for text, links, and focus so contrast
   stays AA on dark. */
[data-bs-theme="dark"] {
    color-scheme: dark;

    /* Brand stays recognizable; lightened so white text keeps contrast. */
    --color-blue: #479ef5;
    --color-blue-hover: #62abf5;
    --color-blue-active: #9cc9f9;
    --color-teal: #4fb3b3;
    --color-purple: #9a7fd4;
    --color-orange: #e98f5f;
    --color-green: #7bb79a;
    --color-red: #e37d80;
    --color-warning: #f0958a;

    --color-canvas: #11100f;
    --color-surface: #1b1a19;
    --color-surface-muted: #252423;
    --color-surface-hover: #2d2c2c;
    --color-surface-selected: #383735;
    --color-surface-hover-strong: #3b3a39;
    --color-surface-pressed: #484644;
    --color-nav: #1b1a19;
    --color-nav-hover: #252423;

    --color-text: #f3f2f1;
    --color-text-secondary: #e1dfdd;
    --color-text-muted: #c8c6c4;
    --color-on-primary: #fff;
    --color-border: #3b3a39;
    --color-border-strong: #605e5c;
    --color-border-subtle: #2d2c2c;
    --color-disabled: #797775;

    --color-primary: var(--color-blue);
    --color-primary-hover: var(--color-blue-hover);
    --color-primary-active: var(--color-blue-active);
    /* Distinct dark-mode bar accent: saturated Office blue, deliberately
       different from both the light-mode bar and the lighter interactive
       blue used for text/links on charcoal. */
    --color-suite-bar: #0277d3;
    --color-success: #7bb79a;
    --color-success-bg: #1a2e22;
    --color-success-border: #2f6b3a;
    --color-warning-bg: #3a2a12;
    --color-danger: #e37d80;
    --color-danger-bg: #3b1f22;
    --color-info-bg: rgba(71, 158, 245, .14);

    /* Elevation is subtler on dark; use borders + faint glow instead. */
    --shadow-card: 0 1.6px 3.6px rgba(0, 0, 0, .5),
        0 .3px .9px rgba(0, 0, 0, .45);
    --shadow-card-hover: 0 3.2px 7.2px rgba(0, 0, 0, .5),
        0 .6px 1.8px rgba(0, 0, 0, .45);
    --shadow-panel: var(--shadow-card);
    --shadow-overlay: 0 8px 28px rgba(0, 0, 0, .55);

    /* Bootstrap theme mapping (dark). */
    --bs-body-color: var(--color-text);
    --bs-body-color-rgb: 243, 242, 241;
    --bs-body-bg: var(--color-canvas);
    --bs-body-bg-rgb: 17, 16, 15;
    --bs-secondary-color: var(--color-text-muted);
    --bs-secondary-bg: var(--color-surface-hover);
    --bs-secondary-bg-rgb: 45, 44, 44;
    --bs-tertiary-color: var(--color-text-muted);
    --bs-tertiary-bg: var(--color-surface-muted);
    --bs-heading-color: var(--color-text);
    --bs-emphasis-color: var(--color-text);
    --bs-emphasis-color-rgb: 243, 242, 241;
    --bs-primary: var(--color-primary);
    --bs-primary-rgb: 71, 158, 245;
    --bs-primary-text-emphasis: var(--color-primary);
    --bs-primary-bg-subtle: var(--color-info-bg);
    --bs-primary-border-subtle: var(--color-primary);
    --bs-link-color: var(--color-primary);
    --bs-link-color-rgb: 71, 158, 245;
    --bs-link-hover-color: var(--color-primary-hover);
    --bs-link-hover-color-rgb: 98, 171, 245;
    --bs-border-color: var(--color-border);
    --bs-border-color-translucent: var(--color-border-subtle);

    --bs-success: var(--color-success);
    --bs-success-rgb: 123, 183, 154;
    --bs-success-text-emphasis: #9fd89f;
    --bs-success-bg-subtle: rgba(16, 124, 16, .22);
    --bs-success-border-subtle: var(--color-success-border);
    --bs-danger: var(--color-danger);
    --bs-danger-rgb: 227, 125, 128;
    --bs-danger-text-emphasis: #f1a7ab;
    --bs-danger-bg-subtle: rgba(164, 38, 44, .26);
    --bs-danger-border-subtle: var(--color-danger);
    --bs-warning: var(--color-warning);
    --bs-warning-rgb: 240, 149, 138;
    --bs-warning-text-emphasis: #f6c593;
    --bs-warning-bg-subtle: rgba(216, 59, 1, .18);
    --bs-warning-border-subtle: #8a3707;
    --bs-info: var(--color-primary);
    --bs-info-rgb: 71, 158, 245;
    --bs-info-text-emphasis: var(--color-primary-active);
    --bs-info-bg-subtle: var(--color-info-bg);
    --bs-info-border-subtle: var(--color-primary);
    --bs-secondary-text-emphasis: var(--color-text-muted);
    --bs-secondary-border-subtle: var(--color-border);
    --bs-dark-text-emphasis: var(--color-text-secondary);

    --bs-focus-ring-color: rgba(71, 158, 245, .35);
}