/* =========================
         THEME VARIABLES (LIGHT)
         ========================= */
:root {
    --alert-font-color: #000000;
    --banner-background: #ffffff;
    --banner-border: none;
    --banner-font-color: #000000;
    --banner-shadow:  none;
    --banner-subtext: #808080;
    --border-font-color: #000000;
    --button-background: #000000;
    --button-border: 1px solid #000000;
    --button-font-color: #ffffff;
    --button-hover-background: #333333;
    --button-hover-border: 1px solid #000000;
    --button-shadow: none;
    --disabled-opacity: 0.5;
    --field-bubble-background: #f0f0f0;
    --field-bubble-border: 1px solid #000000;
    --field-name-background: #ffffff;
    --field-name-border: 1px solid #000000;
    --field-name-color: #000000;
    --fillup-background: #f0f0f0;
    --footer-background: #000000;
    --footer-border: 1px solid #000000;
    --footer-font-color: #ffffff;
    --footer-shadow:  none;
    --header-background: #000000;
    --header-border: 1px solid #000000;
    --header-font-color: #ffffff;
    --header-shadow:  none;
    --help-hover-background: #000000;
    --help-hover-font-color: #ffffff;
    --input-background: #ffffff;
    --input-border: 1px solid #000000;
    --input-font-color: #000000;
    --link-font-color: #000000;
    --link-hover-font-color: #666666;
    --main-background: #ffffff;
    --main-border: 1px solid #000000;
    --main-font-color: #000000;
    --main-shadow:  none;
    --main-title-background: inherit;
    --main-title-font-color: #000000;
    --main-title-font-size: 20px;
    --page-background: #f0f0f0;
    --page-font-color: #000000;
    --page-font-family: Arial, sans-serif;
    --page-grid-border-radius: 5px;
    --page-grid-gap: 3px;
    --dash-gap: 16px;
    /* Shared visual-depth vocabulary. Shells and components read these aliases;
       a site can tune the underlying established tokens without learning a
       second colour system. */
    --accent-background: var(--button-background);
    --accent-strong: var(--button-hover-background);
    --accent-contrast: var(--button-font-color);
    --accent-soft-background: color-mix(in srgb, var(--accent-background) 12%, var(--main-background));
    --accent-glow: 0 0 0 1px color-mix(in srgb, var(--accent-background) 22%, transparent),
                   0 14px 34px color-mix(in srgb, var(--accent-background) 20%, transparent);
    --gradient-accent: linear-gradient(135deg, var(--accent-background), var(--accent-strong));
    --gradient-accent-hover: linear-gradient(135deg, var(--accent-strong), var(--accent-background));
    --surface-raised: var(--main-background);
    --surface-subtle: var(--field-bubble-background);
    --surface-card: var(--surface-raised);
    --surface-card-hover: linear-gradient(145deg, var(--surface-raised), var(--surface-subtle));
    --surface-page-accent: radial-gradient(circle at 100% 0,
                            color-mix(in srgb, var(--accent-background) 9%, transparent),
                            transparent 32%);
    --card-border-hover: color-mix(in srgb, var(--accent-background) 42%, transparent);
    --card-highlight: linear-gradient(110deg, transparent 25%,
                      color-mix(in srgb, var(--accent-background) 10%, transparent) 48%, transparent 72%);
    --focus-ring-color: var(--link-font-color);
    --shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.08), 0 8px 24px rgba(0, 0, 0, 0.06);
    --shadow-float: 0 12px 32px rgba(0, 0, 0, 0.18);
    --shadow-card-hover: var(--accent-glow);
    --nav-background: var(--sidebar-background);
    --nav-font-color: var(--sidebar-menu-font-color);
    --nav-gradient: linear-gradient(155deg, var(--nav-background),
                    color-mix(in srgb, var(--nav-background) 72%, var(--accent-background)));
    --nav-hover-background: var(--sidebar-menu-hover-background);
    --nav-active-background: var(--sidebar-menu-active-background);
    --nav-active-font-color: var(--sidebar-menu-active-font-color);
    --nav-indicator: var(--accent-background);
    --badge-background: var(--surface-subtle);
    --badge-font-color: var(--main-font-color);
    --badge-border: 1px solid color-mix(in srgb, var(--main-font-color) 14%, transparent);
    --motion-fast: 120ms;
    --motion-normal: 180ms;
    --motion-slow: 320ms;
    --motion-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --motion-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --popup-activator-border: 1px solid #000000;
    --popup-background: #ffffff;
    --popup-border: 1px solid #000000;
    --popup-font-color: #000000;
    --popup-window-border: 1px solid #000000;
    --popup-window-shadow: rgba(0, 0, 0, 0.3);
    --scrollbar-font-color: #ffffff #000000;
    --select-background: #ffffff;
    --select-font-color: #000000;
    --sidebar-background: #000000;
    --sidebar-border: 1px solid #000000;
    --sidebar-menu-active-background: #ffffff;
    --sidebar-menu-active-font-color: #000000;
    --sidebar-menu-font-color: #ffffff;
    --sidebar-menu-hover-background: #808080;
    --sidebar-shadow:  none;
    --status-failed-background: #c06060;
    --status-failed-font-color: #ffffff;
    --status-failed-border: 2px solid #A03030;
    --status-normal-background: #ffffff;
    --status-success-background: #608060;
    --status-success-font-color: #ffffff;
    --status-void-background : #c06060;
    --status-void-font-color : #ffffff;
    --status-warning-background: #e0e0a0;
    --status-warning-border: 4px solid #b58100;
    --status-warning-font-color: #5a4300;
    --sticky-column-background: #f0f0f0;
    --sticky-header-background: #000000;
    /* Charts (promoted from mfr's analytics palette, docs/style-guide.md §2):
       four comparison series — current primary/secondary, previous
       primary/secondary — and a 7-step single-hue ramp for categorical bars.
       Defined once; data ink does not swap with the theme. */
    --chart-series-1: #98226b;
    --chart-series-2: #47556b;
    --chart-series-3: #d6a7c4;
    --chart-series-4: #b5bbc4;
    --chart-ramp-1: #98226b;
    --chart-ramp-2: #49103a;
    --chart-ramp-3: #602f53;
    --chart-ramp-4: #784d6d;
    --chart-ramp-5: #8f6c86;
    --chart-ramp-6: #a78b9f;
    --chart-ramp-7: #beaab9;
    --svg-icon-fill: #ffffff;
    --svg-icon-secondary-fill: #404040;
    --svg-icon-stroke: #000000;
    --table-cell-font-size: 14px;
    --table-cell-padding: 4px;
    --table-even-row-hover: #e0e0e0;
    --table-even-row: #ffffff;
    --table-header-background: #d0d0d0;
    --table-header-font-color: #000000;
    --table-odd-row-hover: #e0e0e0;
    --table-odd-row: #f0f0f0;
    --user-icon-background: #000000;
    --user-initials-font-color: #ffffff;
}

body.dark {
    --alert-font-color: #d32f2f;
    --banner-background: #ffffff;
    --banner-border: none;
    --banner-font-color: #212121;
    --banner-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    --banner-subtext: #757575;
    --border-font-color: #424242;
    --button-background: #5e35b1;
    --button-border: 1px solid #4527a0;
    --button-font-color: #ffffff;
    --button-hover-background: #4527a0;
    --button-hover-border: 1px solid #311b92;
    --button-shadow: 0 2px 4px rgba(94, 53, 177, 0.2);
    --disabled-opacity: 0.5;
    --field-bubble-background: #f5f5f5;
    --field-bubble-border: 1px solid #e0e0e0;
    --field-name-background: #ffffff;
    --field-name-border: 1px solid #e0e0e0;
    --field-name-color: #424242;
    --fillup-background: #fafafa;
    --footer-background: #f5f5f5;
    --footer-border: 1px solid #e0e0e0;
    --footer-font-color: #616161;
    --footer-shadow: 0 -1px 3px rgba(0, 0, 0, 0.05);
    --header-background: #fafafa;
    --header-border: 1px solid #e0e0e0;
    --header-font-color: #212121;
    --header-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    --help-hover-background: #5e35b1;
    --help-hover-font-color: #ffffff;
    --input-background: #ffffff;
    --input-border: 1px solid #bdbdbd;
    --input-font-color: #212121;
    --link-font-color: #5e35b1;
    --link-hover-font-color: #7e57c2;
    --main-background: #ffffff;
    --main-border: 1px solid #e0e0e0;
    --main-font-color: #424242;
    --main-shadow: none;
    --main-title-background: transparent;
    --main-title-font-color: #212121;
    --main-title-font-size: 20px;
    --page-background: #f5f5f5;
    --page-font-color: #424242;
    --page-font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    --page-grid-border-radius: 8px;
    --page-grid-gap: 0px;
    --dash-gap: 16px;
    /* Re-state aliases at the override scope: custom-property references are
       resolved where declared, so inheriting :root's aliases would retain the
       light palette even after these underlying tokens change. */
    --accent-background: var(--button-background);
    --accent-strong: var(--button-hover-background);
    --accent-contrast: var(--button-font-color);
    --accent-soft-background: color-mix(in srgb, var(--accent-background) 12%, var(--main-background));
    --accent-glow: 0 0 0 1px color-mix(in srgb, var(--accent-background) 22%, transparent),
                   0 14px 34px color-mix(in srgb, var(--accent-background) 20%, transparent);
    --gradient-accent: linear-gradient(135deg, var(--accent-background), var(--accent-strong));
    --gradient-accent-hover: linear-gradient(135deg, var(--accent-strong), var(--accent-background));
    --surface-raised: var(--main-background);
    --surface-subtle: var(--field-bubble-background);
    --surface-card: var(--surface-raised);
    --surface-card-hover: linear-gradient(145deg, var(--surface-raised), var(--surface-subtle));
    --surface-page-accent: radial-gradient(circle at 100% 0,
                            color-mix(in srgb, var(--accent-background) 9%, transparent),
                            transparent 32%);
    --card-border-hover: color-mix(in srgb, var(--accent-background) 42%, transparent);
    --card-highlight: linear-gradient(110deg, transparent 25%,
                      color-mix(in srgb, var(--accent-background) 10%, transparent) 48%, transparent 72%);
    --focus-ring-color: var(--link-font-color);
    --shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.12), 0 8px 24px rgba(0, 0, 0, 0.10);
    --shadow-float: 0 12px 32px rgba(0, 0, 0, 0.24);
    --shadow-card-hover: var(--accent-glow);
    --nav-background: var(--sidebar-background);
    --nav-font-color: var(--sidebar-menu-font-color);
    --nav-gradient: linear-gradient(155deg, var(--nav-background),
                    color-mix(in srgb, var(--nav-background) 72%, var(--accent-background)));
    --nav-hover-background: var(--sidebar-menu-hover-background);
    --nav-active-background: var(--sidebar-menu-active-background);
    --nav-active-font-color: var(--sidebar-menu-active-font-color);
    --nav-indicator: var(--accent-background);
    --badge-background: var(--surface-subtle);
    --badge-font-color: var(--main-font-color);
    --badge-border: 1px solid color-mix(in srgb, var(--main-font-color) 14%, transparent);
    --motion-slow: 320ms;
    --motion-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --motion-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --popup-activator-border: 1px solid #5e35b1;
    --popup-background: #ffffff;
    --popup-border: 1px solid #e0e0e0;
    --popup-font-color: #424242;
    --popup-window-border: 1px solid #e0e0e0;
    --popup-window-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    --scrollbar-font-color: #5e35b1;
    --select-background: #ffffff;
    --select-font-color: #424242;
    --sidebar-background: #fafafa;
    --sidebar-border: 1px solid #e0e0e0;
    --sidebar-menu-active-background: #5e35b1;
    --sidebar-menu-active-font-color: #ffffff;
    --sidebar-menu-font-color: #616161;
    --sidebar-menu-hover-background: #eeeeee;
    --sidebar-shadow: 1px 0 3px rgba(0, 0, 0, 0.05);
    --status-failed-background: #f44336;
    --status-failed-font-color: #ffffff;
    --status-failed-border: 2px solid #d32f2f;
    --status-normal-background: #ffffff;
    --status-success-background: #4caf50;
    --status-success-font-color: #ffffff;
    --status-void-background: #ff9800;
    --status-void-font-color: #ffffff;
    --status-warning-background: #ffc107;
    --status-warning-border: 4px solid #ffa000;
    --status-warning-font-color: #6d4c00;
    --sticky-column-background: #fafafa;
    --sticky-header-background: #f5f5f5;
    --svg-icon-fill: #5e35b1;
    --svg-icon-secondary-fill: #7e57c2;
    --svg-icon-stroke: #424242;
    --table-cell-font-size: 14px;
    --table-cell-padding: 6px;
    --table-even-row-hover: #f5f5f5;
    --table-even-row: #ffffff;
    --table-header-background: #f5f5f5;
    --table-header-font-color: #212121;
    --table-odd-row-hover: #eeeeee;
    --table-odd-row: #fafafa;
    --user-icon-background: #5e35b1;
    --user-initials-font-color: #ffffff;
}
/* Deliberate fixed inspection surfaces: show matte halos on either theme. */
:root { --cutout-preview-light: #ffffff; --cutout-preview-dark: #202020; }