/* =============================================================================
   Brandsync design tokens (--bs-*) for EdiLink WebApp (copied from egu-products-v3).

   Source: Brandsync MCP `get_tokens` (brandsync-tokens package). Primitive scales, typography, spacing, radius,
   sizing, shadows, z-index and breakpoints are copied 1:1 from the export.

   Semantic tokens (surface / text / icon / border / color-*):
     - [data-theme="dark"]  = the exported values (the export is dark-first).
     - :root (light)        = DERIVED. Brandsync exports no light semantic values. Every derived value is marked
                              "DERIVED" below and logged as a gap in docs/architecture/brandsync-mudblazor-mapping.md.

   Not copied from the export (gaps, see mapping doc): tokens whose value is an unresolved reference such as
   "{color.icons.secondary}", `--bs-shadow-elevation-md` (referenced by the Navigation Drawer but not exported), and the
   all-zero `--bs-duration-*` tokens (animations are not driven by them here).
   ============================================================================= */

/* ---- Primitive palettes (theme independent) ---- */
:root {
    --bs-static-white: #ffffff; --bs-static-black: #000000; --bs-white: #ffffff; --bs-black: #000000;

    --bs-neutral-25: #f9fafb; --bs-neutral-50: #eff0f8; --bs-neutral-100: #dee2ed; --bs-neutral-200: #c2c7d3; --bs-neutral-300: #a0a5b4;
    --bs-neutral-400: #828998; --bs-neutral-500: #6d7585; --bs-neutral-600: #5d6472; --bs-neutral-700: #4d535f; --bs-neutral-800: #363c47;
    --bs-neutral-900: #21262e; --bs-neutral-950: #191c22;
    --bs-neutral-500-transparent: rgba(109, 117, 133, 0.3); --bs-neutral-500-transparent-2: rgba(109, 117, 133, 0.75);
    --bs-neutral-50-transparent: rgba(239, 240, 248, 0.9);

    --bs-gray-25: #fbfbfb; --bs-gray-50: #f6f7f7; --bs-gray-100: #eef1f1; --bs-gray-200: #dfe5e6; --bs-gray-300: #cbd3d6; --bs-gray-400: #b6bec3;
    --bs-gray-500: #a2aab2; --bs-gray-600: #8c959f; --bs-gray-700: #7f868f; --bs-gray-800: #636970; --bs-gray-900: #53585c; --bs-gray-950: #303236;
    --bs-gray-transparent: rgba(162, 170, 178, 0.24); --bs-gray-transparent-2: rgba(162, 170, 178, 0.32); --bs-gray-transparent-3: rgba(162, 170, 178, 0.44);

    --bs-success-50: #e5f5e9; --bs-success-100: #c5ebd5; --bs-success-200: #94d4b3; --bs-success-300: #6bb491; --bs-success-400: #469873;
    --bs-success-500: #00855b; --bs-success-600: #11714e; --bs-success-700: #1b5d43; --bs-success-800: #184330; --bs-success-900: #0f2b1e; --bs-success-950: #101e17;

    --bs-error-50: #fcecea; --bs-error-100: #ffdad7; --bs-error-200: #ffb3ae; --bs-error-300: #ff807a; --bs-error-400: #ee5351;
    --bs-error-500: #d93539; --bs-error-600: #b92f31; --bs-error-700: #982a2a; --bs-error-800: #701d1e; --bs-error-900: #481212; --bs-error-950: #34100f;

    --bs-warning-50: #ffefdb; --bs-warning-100: #ffdea1; --bs-warning-200: #f1bd51; --bs-warning-300: #d39b00; --bs-warning-400: #b18100;
    --bs-warning-500: #956d00; --bs-warning-600: #805d00; --bs-warning-700: #6b4d00; --bs-warning-800: #4e3700; --bs-warning-900: #332300; --bs-warning-950: #261a00;

    --bs-information-50: #edf0fa; --bs-information-100: #d6e3f8; --bs-information-200: #aec8ed; --bs-information-300: #73a9ea; --bs-information-400: #448cd6;
    --bs-information-500: #0078cb; --bs-information-600: #0066ae; --bs-information-700: #005592; --bs-information-800: #003d6c; --bs-information-900: #00283f; --bs-information-950: #111c2a;

    --bs-brand-colors-purple-50: #f3effb; --bs-brand-colors-purple-100: #e5dffd; --bs-brand-colors-purple-200: #c8c0ff; --bs-brand-colors-purple-300: #a49aff;
    --bs-brand-colors-purple-400: #8676fe; --bs-brand-colors-purple-500: #715afc; --bs-brand-colors-purple-600: #5e47e6; --bs-brand-colors-purple-700: #4b35c9;
    --bs-brand-colors-purple-800: #3720a1; --bs-brand-colors-purple-900: #220f73; --bs-brand-colors-purple-950: #201463;

    --bs-brand-colors-cobalt-50: #f1effa; --bs-brand-colors-cobalt-100: #e0e0fd; --bs-brand-colors-cobalt-200: #bcc2ff; --bs-brand-colors-cobalt-300: #939eff;
    --bs-brand-colors-cobalt-400: #6d7cff; --bs-brand-colors-cobalt-500: #4f63ff; --bs-brand-colors-cobalt-600: #3b4ee9; --bs-brand-colors-cobalt-700: #303ecd;
    --bs-brand-colors-cobalt-800: #1928a5; --bs-brand-colors-cobalt-900: #091675; --bs-brand-colors-cobalt-950: #050d5d;

    --bs-brand-colors-blue-50: #eef0fa; --bs-brand-colors-blue-100: #d8e3fc; --bs-brand-colors-blue-200: #aec7f8; --bs-brand-colors-blue-300: #7aa6f2;
    --bs-brand-colors-blue-400: #3e88ef; --bs-brand-colors-blue-500: #0073e1; --bs-brand-colors-blue-600: #0062c1; --bs-brand-colors-blue-700: #0051a2;
    --bs-brand-colors-blue-800: #003a78; --bs-brand-colors-blue-900: #002550; --bs-brand-colors-blue-950: #001b3e;

    --bs-brand-colors-green-50: #ecf2ea; --bs-brand-colors-green-100: #d0e9d2; --bs-brand-colors-green-200: #9fd3a9; --bs-brand-colors-green-300: #78b385;
    --bs-brand-colors-green-400: #469961; --bs-brand-colors-green-500: #23834a; --bs-brand-colors-green-600: #2a7043; --bs-brand-colors-green-700: #295c3a;
    --bs-brand-colors-green-800: #21422a; --bs-brand-colors-green-900: #112b19; --bs-brand-colors-green-950: #0b2011;

    --bs-brand-colors-lime-50: #f0f2e7; --bs-brand-colors-lime-100: #d7e8c6; --bs-brand-colors-lime-200: #add18f; --bs-brand-colors-lime-300: #81b45c;
    --bs-brand-colors-lime-400: #64963f; --bs-brand-colors-lime-500: #478019; --bs-brand-colors-lime-600: #406f1d; --bs-brand-colors-lime-700: #385b1e;
    --bs-brand-colors-lime-800: #2a4218; --bs-brand-colors-lime-900: #182a0c; --bs-brand-colors-lime-950: #121f09;

    --bs-brand-colors-yellow-50: #faf1db; --bs-brand-colors-yellow-100: #f9e28a; --bs-brand-colors-yellow-200: #e3c437; --bs-brand-colors-yellow-300: #c0a300;
    --bs-brand-colors-yellow-400: #a18800; --bs-brand-colors-yellow-500: #887200; --bs-brand-colors-yellow-600: #746202; --bs-brand-colors-yellow-700: #615102;
    --bs-brand-colors-yellow-800: #463a01; --bs-brand-colors-yellow-900: #2e2500; --bs-brand-colors-yellow-950: #221b00;

    --bs-brand-colors-amber-50: #fceee0; --bs-brand-colors-amber-100: #f8dfbf; --bs-brand-colors-amber-200: #f1be71; --bs-brand-colors-amber-300: #d19c46;
    --bs-brand-colors-amber-400: #b47f1e; --bs-brand-colors-amber-500: #996805; --bs-brand-colors-amber-600: #875b04; --bs-brand-colors-amber-700: #6f4b02;
    --bs-brand-colors-amber-800: #513601; --bs-brand-colors-amber-900: #352201; --bs-brand-colors-amber-950: #291900;

    --bs-brand-colors-orange-50: #faeee9; --bs-brand-colors-orange-100: #f9ddd0; --bs-brand-colors-orange-200: #f7b997; --bs-brand-colors-orange-300: #f08c50;
    --bs-brand-colors-orange-400: #d26d2b; --bs-brand-colors-orange-500: #ba5400; --bs-brand-colors-orange-600: #a24907; --bs-brand-colors-orange-700: #873d07;
    --bs-brand-colors-orange-800: #642c04; --bs-brand-colors-orange-900: #411b02; --bs-brand-colors-orange-950: #301302;

    --bs-brand-colors-magenta-50: #fbeeef; --bs-brand-colors-magenta-100: #ffd7e0; --bs-brand-colors-magenta-200: #ffb1c7; --bs-brand-colors-magenta-300: #ff7aa7;
    --bs-brand-colors-magenta-400: #ea4f8b; --bs-brand-colors-magenta-500: #d12e75; --bs-brand-colors-magenta-600: #b62965; --bs-brand-colors-magenta-700: #9a1f53;
    --bs-brand-colors-magenta-800: #71163c; --bs-brand-colors-magenta-900: #4a0d27; --bs-brand-colors-magenta-950: #38091c;

    --bs-brand-colors-maroon-50: #f9eef3; --bs-brand-colors-maroon-100: #f6dbef; --bs-brand-colors-maroon-200: #eab6e3; --bs-brand-colors-maroon-300: #d88cd1;
    --bs-brand-colors-maroon-400: #c465c0; --bs-brand-colors-maroon-500: #b14bb0; --bs-brand-colors-maroon-600: #983f98; --bs-brand-colors-maroon-700: #7f347e;
    --bs-brand-colors-maroon-800: #5e245d; --bs-brand-colors-maroon-900: #3e163d; --bs-brand-colors-maroon-950: #2c122b;

    --bs-brand-colors-violet-50: #f9eefe; --bs-brand-colors-violet-100: #eedcfd; --bs-brand-colors-violet-200: #d8b8fd; --bs-brand-colors-violet-300: #be92f4;
    --bs-brand-colors-violet-400: #a372dd; --bs-brand-colors-violet-500: #8f5ace; --bs-brand-colors-violet-600: #7750a8; --bs-brand-colors-violet-700: #64428d;
    --bs-brand-colors-violet-800: #492e6a; --bs-brand-colors-violet-900: #311b4b; --bs-brand-colors-violet-950: #241338;

    --bs-brand-colors-steel-50: #eef0f6; --bs-brand-colors-steel-100: #d9e3f1; --bs-brand-colors-steel-200: #b1c9e3; --bs-brand-colors-steel-300: #83aad0;
    --bs-brand-colors-steel-400: #558dbe; --bs-brand-colors-steel-500: #3779ae; --bs-brand-colors-steel-600: #2b6796; --bs-brand-colors-steel-700: #1f567f;
    --bs-brand-colors-steel-800: #103e5f; --bs-brand-colors-steel-900: #041d30; --bs-brand-colors-steel-950: #032841;

    --bs-brand-colors-teal-50: #e9f3f2; --bs-brand-colors-teal-100: #c8e9e7; --bs-brand-colors-teal-200: #9ed1cf; --bs-brand-colors-teal-300: #72b2b0;
    --bs-brand-colors-teal-400: #469593; --bs-brand-colors-teal-500: #008280; --bs-brand-colors-teal-600: #116f6e; --bs-brand-colors-teal-700: #185b5a;
    --bs-brand-colors-teal-800: #144241; --bs-brand-colors-teal-900: #032b2a; --bs-brand-colors-teal-950: #02201f;

    --bs-brand-colors-jade-50: #eaf3ef; --bs-brand-colors-jade-100: #c6eadf; --bs-brand-colors-jade-200: #8cd4c2; --bs-brand-colors-jade-300: #63b4a2;
    --bs-brand-colors-jade-400: #349985; --bs-brand-colors-jade-500: #008370; --bs-brand-colors-jade-600: #0e7060; --bs-brand-colors-jade-700: #0e5d50;
    --bs-brand-colors-jade-800: #034439; --bs-brand-colors-jade-900: #002c24; --bs-brand-colors-jade-950: #02201a;

    /* Brand alias: the export maps brand = blue */
    --bs-brand-50: var(--bs-brand-colors-blue-50); --bs-brand-100: var(--bs-brand-colors-blue-100); --bs-brand-200: var(--bs-brand-colors-blue-200);
    --bs-brand-300: var(--bs-brand-colors-blue-300); --bs-brand-400: var(--bs-brand-colors-blue-400); --bs-brand-500: var(--bs-brand-colors-blue-500);
    --bs-brand-600: var(--bs-brand-colors-blue-600); --bs-brand-700: var(--bs-brand-colors-blue-700); --bs-brand-800: var(--bs-brand-colors-blue-800);
    --bs-brand-900: var(--bs-brand-colors-blue-900); --bs-brand-950: var(--bs-brand-colors-blue-950);

    /* Typography */
    --bs-typography-font-family-heading: "Roboto", "Helvetica", "Arial", sans-serif;
    --bs-typography-font-family-body: "Roboto", "Helvetica", "Arial", sans-serif;
    --bs-font-weight-thin: 100; --bs-font-weight-regular: 400; --bs-font-weight-medium: 500; --bs-font-weight-semibold: 600; --bs-font-weight-bold: 700; --bs-font-weight-black: 900;
    --bs-font-size-2xs: 10px; --bs-font-size-xs: 12px; --bs-font-size-sm: 14px; --bs-font-size-md: 16px; --bs-font-size-lg: 18px; --bs-font-size-xl: 20px;
    --bs-font-size-2xl: 24px; --bs-font-size-3xl: 28px; --bs-font-size-4xl: 32px; --bs-font-size-5xl: 40px; --bs-font-size-6xl: 48px;
    --bs-line-height-none: 1; --bs-line-height-tight: 1.1; --bs-line-height-snug: 1.25; --bs-line-height-normal: 1.5; --bs-line-height-relaxed: 1.625; --bs-line-height-loose: 2;
    --bs-letter-spacing-tighter: -0.05em; --bs-letter-spacing-tight: -0.025em; --bs-letter-spacing-normal: 0em; --bs-letter-spacing-wide: 0.025em;
    --bs-letter-spacing-wider: 0.05em; --bs-letter-spacing-widest: 0.1em;

    /* Scale (spacing / radius / sizing share it) */
    --bs-scale-0: 0px; --bs-scale-10: 1px; --bs-scale-25: 2px; --bs-scale-50: 4px; --bs-scale-75: 6px; --bs-scale-100: 8px; --bs-scale-150: 12px;
    --bs-scale-200: 16px; --bs-scale-250: 20px; --bs-scale-300: 24px; --bs-scale-350: 28px; --bs-scale-400: 32px; --bs-scale-500: 40px; --bs-scale-550: 44px;
    --bs-scale-600: 48px; --bs-scale-700: 56px; --bs-scale-800: 64px; --bs-scale-1000: 80px; --bs-scale-1200: 96px; --bs-scale-1500: 120px;
    --bs-scale-1600: 128px; --bs-scale-3200: 256px; --bs-scale-6400: 512px;

    --bs-spacing-0: var(--bs-scale-0); --bs-spacing-25: var(--bs-scale-25); --bs-spacing-50: var(--bs-scale-50); --bs-spacing-75: var(--bs-scale-75);
    --bs-spacing-100: var(--bs-scale-100); --bs-spacing-150: var(--bs-scale-150); --bs-spacing-200: var(--bs-scale-200); --bs-spacing-250: var(--bs-scale-250);
    --bs-spacing-300: var(--bs-scale-300); --bs-spacing-350: var(--bs-scale-350); --bs-spacing-400: var(--bs-scale-400); --bs-spacing-500: var(--bs-scale-500);
    --bs-spacing-550: var(--bs-scale-550); --bs-spacing-600: var(--bs-scale-600); --bs-spacing-700: var(--bs-scale-700); --bs-spacing-800: var(--bs-scale-800);
    --bs-spacing-1000: var(--bs-scale-1000); --bs-spacing-1200: var(--bs-scale-1200); --bs-spacing-1500: var(--bs-scale-1500);

    --bs-border-radius-0: var(--bs-scale-0); --bs-border-radius-50: var(--bs-scale-50); --bs-border-radius-75: var(--bs-scale-75);
    --bs-border-radius-100: var(--bs-scale-100); --bs-border-radius-150: var(--bs-scale-150); --bs-border-radius-200: var(--bs-scale-200);
    --bs-border-radius-300: var(--bs-scale-300); --bs-border-radius-full: var(--bs-scale-1500);

    --bs-border-width-0: var(--bs-scale-0); --bs-border-width-thin: var(--bs-scale-10); --bs-border-width-medium: var(--bs-scale-25); --bs-border-width-thick: var(--bs-scale-50);

    --bs-sizing-75: var(--bs-scale-75); --bs-sizing-100: var(--bs-scale-100); --bs-sizing-200: var(--bs-scale-200); --bs-sizing-250: var(--bs-scale-250);
    --bs-sizing-300: var(--bs-scale-300); --bs-sizing-400: var(--bs-scale-400); --bs-sizing-500: var(--bs-scale-500); --bs-sizing-550: var(--bs-scale-550);
    --bs-sizing-600: var(--bs-scale-600); --bs-sizing-700: var(--bs-scale-700); --bs-sizing-800: var(--bs-scale-800); --bs-sizing-1000: var(--bs-scale-1000);
    --bs-sizing-1200: var(--bs-scale-1200); --bs-sizing-1600: var(--bs-scale-1600); --bs-sizing-3200: var(--bs-scale-3200); --bs-sizing-6400: var(--bs-scale-6400);

    /* Layout / grid */
    --bs-breakpoint-xs: 480px; --bs-breakpoint-sm: 640px; --bs-breakpoint-md: 768px; --bs-breakpoint-lg: 1024px; --bs-breakpoint-xl: 1280px; --bs-breakpoint-2xl: 1536px;
    --bs-grid-columns: 12; --bs-grid-container-max: 1440px; --bs-grid-gutter: var(--bs-spacing-200);
    --bs-grid-margin-sm: var(--bs-spacing-200); --bs-grid-margin-md: var(--bs-spacing-300); --bs-grid-margin-lg: var(--bs-spacing-400);
    --bs-grid-sidebar-width: var(--bs-sizing-3200); --bs-grid-panel-min-width: var(--bs-sizing-3200);
    --bs-margin-fluid: var(--bs-scale-300); --bs-margin-with-navigation-drawer: var(--bs-scale-300); --bs-gutter-gutter: var(--bs-scale-300);

    /* Z-index */
    --bs-z-index-below: -1; --bs-z-index-base: 0; --bs-z-index-raised: 10; --bs-z-index-dropdown: 100; --bs-z-index-sticky: 200; --bs-z-index-overlay: 300;
    --bs-z-index-modal: 400; --bs-z-index-popover: 500; --bs-z-index-toast: 600; --bs-z-index-top: 999;

    /* Opacity / easing (the exported --bs-duration-* tokens are all 0ms and are intentionally not copied) */
    --bs-opacity-disabled: 0.5; --bs-opacity-hover: 0.8; --bs-opacity-focus: 0.9;
    --bs-easing-standard: cubic-bezier(0.4, 0, 0.2, 1); --bs-easing-decelerate: cubic-bezier(0, 0, 0.2, 1);
    --bs-easing-accelerate: cubic-bezier(0.4, 0, 1, 1); --bs-easing-linear: linear;

    /* Shadows */
    --bs-shadow-none: none;
    --bs-shadow-xs: 0 1px 2px rgba(33, 38, 46, 0.06), 0 1px 3px rgba(33, 38, 46, 0.10);
    --bs-shadow-sm: 0 1px 3px rgba(33, 38, 46, 0.08), 0 2px 6px rgba(33, 38, 46, 0.12);
    --bs-shadow-md: 0 2px 8px rgba(33, 38, 46, 0.10), 0 4px 16px rgba(33, 38, 46, 0.16);
    --bs-shadow-lg: 0 4px 16px rgba(33, 38, 46, 0.12), 0 8px 32px rgba(33, 38, 46, 0.20);
    --bs-shadow-xl: 0 8px 24px rgba(33, 38, 46, 0.14), 0 16px 48px rgba(33, 38, 46, 0.24);
    --bs-shadow-2xl: 0 16px 48px rgba(33, 38, 46, 0.20), 0 32px 64px rgba(33, 38, 46, 0.32);
    --bs-shadow-elevation-md: var(--bs-shadow-md); /* referenced by Navigation Drawer spec, not exported: aliased */

    /* Text styles (size / weight / line-height / letter-spacing) */
    --bs-text-style-display-size: var(--bs-font-size-6xl); --bs-text-style-display-weight: 700; --bs-text-style-display-line-height: var(--bs-line-height-tight); --bs-text-style-display-letter-spacing: var(--bs-letter-spacing-tight);
    --bs-text-style-heading-1-size: var(--bs-font-size-4xl); --bs-text-style-heading-1-weight: 600; --bs-text-style-heading-1-line-height: var(--bs-line-height-snug); --bs-text-style-heading-1-letter-spacing: var(--bs-letter-spacing-tight);
    --bs-text-style-heading-2-size: var(--bs-font-size-3xl); --bs-text-style-heading-2-weight: 600; --bs-text-style-heading-2-line-height: var(--bs-line-height-snug); --bs-text-style-heading-2-letter-spacing: var(--bs-letter-spacing-normal);
    --bs-text-style-heading-3-size: var(--bs-font-size-2xl); --bs-text-style-heading-3-weight: 600; --bs-text-style-heading-3-line-height: var(--bs-line-height-snug); --bs-text-style-heading-3-letter-spacing: var(--bs-letter-spacing-normal);
    --bs-text-style-heading-4-size: var(--bs-font-size-xl); --bs-text-style-heading-4-weight: 500; --bs-text-style-heading-4-line-height: var(--bs-line-height-normal); --bs-text-style-heading-4-letter-spacing: var(--bs-letter-spacing-normal);
    --bs-text-style-body-lg-size: var(--bs-font-size-lg); --bs-text-style-body-lg-weight: 400; --bs-text-style-body-lg-line-height: var(--bs-line-height-normal); --bs-text-style-body-lg-letter-spacing: var(--bs-letter-spacing-normal);
    --bs-text-style-body-md-size: var(--bs-font-size-md); --bs-text-style-body-md-weight: 400; --bs-text-style-body-md-line-height: var(--bs-line-height-normal); --bs-text-style-body-md-letter-spacing: var(--bs-letter-spacing-normal);
    --bs-text-style-body-sm-size: var(--bs-font-size-sm); --bs-text-style-body-sm-weight: 400; --bs-text-style-body-sm-line-height: var(--bs-line-height-normal); --bs-text-style-body-sm-letter-spacing: var(--bs-letter-spacing-normal);
    --bs-text-style-label-lg-size: var(--bs-font-size-md); --bs-text-style-label-lg-weight: 500; --bs-text-style-label-lg-line-height: var(--bs-line-height-snug); --bs-text-style-label-lg-letter-spacing: var(--bs-letter-spacing-normal);
    --bs-text-style-label-md-size: var(--bs-font-size-sm); --bs-text-style-label-md-weight: 500; --bs-text-style-label-md-line-height: var(--bs-line-height-snug); --bs-text-style-label-md-letter-spacing: var(--bs-letter-spacing-normal);
    --bs-text-style-label-sm-size: var(--bs-font-size-xs); --bs-text-style-label-sm-weight: 500; --bs-text-style-label-sm-line-height: var(--bs-line-height-snug); --bs-text-style-label-sm-letter-spacing: var(--bs-letter-spacing-wide);
    --bs-text-style-caption-size: var(--bs-font-size-xs); --bs-text-style-caption-weight: 400; --bs-text-style-caption-line-height: var(--bs-line-height-normal); --bs-text-style-caption-letter-spacing: var(--bs-letter-spacing-normal);
    --bs-text-style-overline-size: var(--bs-font-size-xs); --bs-text-style-overline-weight: 500; --bs-text-style-overline-line-height: var(--bs-line-height-normal); --bs-text-style-overline-letter-spacing: var(--bs-letter-spacing-widest);
    --bs-text-style-data-size: var(--bs-font-size-sm); --bs-text-style-data-weight: 500; --bs-text-style-data-line-height: var(--bs-line-height-tight); --bs-text-style-data-letter-spacing: var(--bs-letter-spacing-normal);
    --bs-text-style-data-dense-size: var(--bs-font-size-2xs); --bs-text-style-data-dense-weight: 400; --bs-text-style-data-dense-line-height: var(--bs-line-height-tight); --bs-text-style-data-dense-letter-spacing: var(--bs-letter-spacing-normal);
}

/* ---- Semantic tokens: LIGHT (DERIVED, see header) ---- */
:root, [data-theme="light"] {
    color-scheme: light;

    --bs-color-primary-default: var(--bs-brand-600);              /* DERIVED: dark uses brand-400 */
    --bs-color-primary-hover: var(--bs-brand-700);                /* DERIVED */
    --bs-color-primary-focused: var(--bs-brand-700);              /* DERIVED */
    --bs-color-primary-pressed: var(--bs-brand-800);              /* DERIVED */
    --bs-color-primary-container: var(--bs-brand-100);            /* DERIVED: also the 3px focus ring colour */
    --bs-color-primary-container-hover: var(--bs-brand-200);      /* DERIVED */
    --bs-color-neutral-default: var(--bs-neutral-600);            /* DERIVED */
    --bs-color-neutral-hover: var(--bs-neutral-700);
    --bs-color-neutral-focused: var(--bs-neutral-700);
    --bs-color-neutral-pressed: var(--bs-neutral-800);
    --bs-color-neutral-container: var(--bs-neutral-50);
    --bs-color-neutral-container-hover: var(--bs-neutral-100);
    --bs-color-neutral-container-focused: var(--bs-neutral-100);
    --bs-color-neutral-container-pressed: var(--bs-neutral-200);
    --bs-color-accent-default: var(--bs-brand-colors-magenta-600);
    --bs-color-accent-hover: var(--bs-brand-colors-magenta-700);
    --bs-color-accent-active: var(--bs-brand-colors-magenta-800);
    --bs-color-accent-container: var(--bs-brand-colors-magenta-100);
    --bs-color-success-default: var(--bs-success-600); --bs-color-success-hover: var(--bs-success-700); --bs-color-success-focused: var(--bs-success-700);
    --bs-color-success-pressed: var(--bs-success-800); --bs-color-success-container: var(--bs-success-50);
    --bs-color-warning-default: var(--bs-warning-600); --bs-color-warning-hover: var(--bs-warning-700); --bs-color-warning-focused: var(--bs-warning-700);
    --bs-color-warning-pressed: var(--bs-warning-800); --bs-color-warning-container: var(--bs-warning-50);
    --bs-color-error-default: var(--bs-error-600); --bs-color-error-hover: var(--bs-error-700); --bs-color-error-focused: var(--bs-error-700);
    --bs-color-error-pressed: var(--bs-error-800); --bs-color-error-container: var(--bs-error-50);
    --bs-color-info-default: var(--bs-information-600); --bs-color-info-hover: var(--bs-information-700); --bs-color-info-focused: var(--bs-information-700);
    --bs-color-info-pressed: var(--bs-information-800); --bs-color-info-container: var(--bs-information-50);

    --bs-text-static-white: var(--bs-white); --bs-text-static-black: var(--bs-black);
    --bs-text-default: var(--bs-neutral-900);
    --bs-text-secondary: var(--bs-neutral-700);
    --bs-text-muted: var(--bs-neutral-600);
    --bs-text-inverse: var(--bs-static-white);
    --bs-text-link: var(--bs-information-600);
    --bs-text-action: var(--bs-brand-600);
    --bs-text-action-hover: var(--bs-brand-700);
    --bs-text-success: var(--bs-success-600); --bs-text-info: var(--bs-information-600); --bs-text-warning: var(--bs-warning-600); --bs-text-error: var(--bs-error-600);
    --bs-text-on-action: var(--bs-white);
    --bs-text-on-disabled: var(--bs-neutral-500);
    --bs-text-accent: var(--bs-brand-colors-purple-600);
    --bs-text-inverse-accent: var(--bs-brand-colors-purple-400);
    --bs-text-neutral-default: var(--bs-neutral-600); --bs-text-neutral-hover: var(--bs-neutral-700); --bs-text-neutral-focused: var(--bs-neutral-700); --bs-text-neutral-pressed: var(--bs-neutral-900);

    --bs-surface-base: var(--bs-white);
    --bs-surface-raised: var(--bs-white);
    --bs-surface-container: var(--bs-neutral-50);                 /* page background */
    --bs-surface-hover: var(--bs-neutral-50);
    --bs-surface-focus: var(--bs-neutral-50);
    --bs-surface-pressed: var(--bs-neutral-100);
    --bs-surface-selected: var(--bs-brand-50);
    --bs-surface-selected-hover: var(--bs-brand-100);
    --bs-surface-selected-focus: var(--bs-brand-100);
    --bs-surface-selected-pressed: var(--bs-brand-200);
    --bs-surface-active: var(--bs-neutral-200);
    --bs-surface-action: var(--bs-color-primary-default);
    --bs-surface-inset: var(--bs-neutral-25);
    --bs-surface-inverse: rgba(33, 38, 46, 0.9);
    --bs-surface-accent: var(--bs-gray-transparent-2);
    --bs-surface-on-action: var(--bs-white);
    --bs-surface-on-action-disabled: var(--bs-neutral-400);
    --bs-surface-action-disabled: var(--bs-neutral-100);
    --bs-surface-success: var(--bs-success-600); --bs-surface-info: var(--bs-information-600); --bs-surface-warning: var(--bs-warning-600); --bs-surface-error: var(--bs-error-600);
    --bs-surface-overlay: rgba(33, 38, 46, 0.6);
    --bs-surface-overlay-level-2: rgba(33, 38, 46, 0.3);

    --bs-icon-static-white: var(--bs-white); --bs-icon-static-black: var(--bs-black);
    --bs-icon-default: var(--bs-neutral-900); --bs-icon-muted: var(--bs-neutral-600); --bs-icon-disabled: var(--bs-neutral-400); --bs-icon-inverse: var(--bs-white);
    --bs-icon-action: var(--bs-brand-600); --bs-icon-action-hover: var(--bs-brand-700);
    --bs-icon-success: var(--bs-success-600); --bs-icon-info: var(--bs-information-600); --bs-icon-warning: var(--bs-warning-600); --bs-icon-error: var(--bs-error-600);
    --bs-icon-neutral-default: var(--bs-neutral-600); --bs-icon-neutral-hover: var(--bs-neutral-700); --bs-icon-neutral-focused: var(--bs-neutral-700); --bs-icon-neutral-pressed: var(--bs-neutral-900);

    --bs-border-default: var(--bs-neutral-100);
    --bs-border-neutral-hover: var(--bs-neutral-500);
    --bs-border-neutral-focus: var(--bs-brand-600);
    --bs-border-neutral-active: var(--bs-neutral-600);
    --bs-border-neutral-disabled: var(--bs-neutral-200);
    --bs-border-neutral-container: var(--bs-neutral-200);
    --bs-border-neutral-container-hover: var(--bs-neutral-400);
    --bs-border-neutral-container-focused: var(--bs-neutral-400);
    --bs-border-neutral-container-pressed: var(--bs-neutral-600);
    --bs-border-success: var(--bs-success-600); --bs-border-success-hover: var(--bs-success-700); --bs-border-success-focus: var(--bs-success-800);
    --bs-border-warning: var(--bs-warning-600); --bs-border-warning-hover: var(--bs-warning-700); --bs-border-warning-focus: var(--bs-warning-800);
    --bs-border-error: var(--bs-error-600); --bs-border-error-hover: var(--bs-error-700); --bs-border-error-focus: var(--bs-error-800);
    --bs-border-info: var(--bs-information-600); --bs-border-info-hover: var(--bs-information-700); --bs-border-info-focus: var(--bs-information-800);
    --bs-border-primary: var(--bs-brand-600); --bs-border-primary-hover: var(--bs-brand-700); --bs-border-primary-focus: var(--bs-brand-700); --bs-border-primary-pressed: var(--bs-brand-800);

    --bs-elevation-none: rgba(0, 0, 0, 0); --bs-elevation-low: rgba(0, 0, 0, 0.05); --bs-elevation-medium: rgba(0, 0, 0, 0.08); --bs-elevation-high: rgba(0, 0, 0, 0.1);
    --bs-elevation-higher: rgba(0, 0, 0, 0.12); --bs-elevation-highest: rgba(0, 0, 0, 0.14); --bs-elevation-inner: rgba(0, 1, 2, 0.1); --bs-elevation-focus: rgba(28, 133, 255, 0.4);

    /* Chart series colours (not part of the export): validated against surface-raised for >=3:1 */
    --egup-chart-1: var(--bs-brand-600); --egup-chart-2: var(--bs-brand-colors-purple-600); --egup-chart-3: var(--bs-brand-colors-teal-600);
    --egup-chart-4: var(--bs-brand-colors-magenta-600); --egup-chart-5: var(--bs-brand-colors-amber-600);
}

/* ---- Semantic tokens: DARK (exported values) ---- */
[data-theme="dark"] {
    color-scheme: dark;

    --bs-color-primary-default: var(--bs-brand-400); --bs-color-primary-hover: var(--bs-brand-300); --bs-color-primary-focused: var(--bs-brand-300);
    --bs-color-primary-pressed: var(--bs-brand-200); --bs-color-primary-container: var(--bs-brand-950); --bs-color-primary-container-hover: var(--bs-brand-900);
    --bs-color-neutral-default: var(--bs-neutral-300); --bs-color-neutral-hover: var(--bs-neutral-200); --bs-color-neutral-focused: var(--bs-neutral-200);
    --bs-color-neutral-pressed: var(--bs-neutral-50); --bs-color-neutral-container: var(--bs-neutral-900); --bs-color-neutral-container-hover: var(--bs-neutral-800);
    --bs-color-neutral-container-focused: var(--bs-neutral-800); --bs-color-neutral-container-pressed: var(--bs-neutral-700);
    --bs-color-accent-default: var(--bs-brand-colors-magenta-400); --bs-color-accent-hover: var(--bs-brand-colors-magenta-300);
    --bs-color-accent-active: var(--bs-brand-colors-magenta-200); --bs-color-accent-container: var(--bs-brand-colors-magenta-700);
    --bs-color-success-default: var(--bs-success-400); --bs-color-success-hover: var(--bs-success-300); --bs-color-success-focused: var(--bs-success-300);
    --bs-color-success-pressed: var(--bs-success-200); --bs-color-success-container: var(--bs-success-800);
    --bs-color-warning-default: var(--bs-warning-400); --bs-color-warning-hover: var(--bs-warning-300); --bs-color-warning-focused: var(--bs-warning-300);
    --bs-color-warning-pressed: var(--bs-warning-200); --bs-color-warning-container: var(--bs-warning-800);
    --bs-color-error-default: var(--bs-error-400); --bs-color-error-hover: var(--bs-error-300); --bs-color-error-focused: var(--bs-error-300);
    --bs-color-error-pressed: var(--bs-error-200); --bs-color-error-container: var(--bs-error-950);
    --bs-color-info-default: var(--bs-information-400); --bs-color-info-hover: var(--bs-information-300); --bs-color-info-focused: var(--bs-information-300);
    --bs-color-info-pressed: var(--bs-information-200); --bs-color-info-container: var(--bs-information-800);

    --bs-text-default: var(--bs-white); --bs-text-secondary: var(--bs-neutral-200); --bs-text-muted: var(--bs-neutral-300);
    --bs-text-inverse: var(--bs-static-black); --bs-text-link: var(--bs-information-400); --bs-text-action: var(--bs-brand-400); --bs-text-action-hover: var(--bs-brand-500);
    --bs-text-success: var(--bs-success-300); --bs-text-info: var(--bs-information-300); --bs-text-warning: var(--bs-warning-300); --bs-text-error: var(--bs-error-300);
    --bs-text-on-action: var(--bs-black); --bs-text-on-disabled: var(--bs-neutral-600);
    --bs-text-accent: var(--bs-brand-colors-purple-400); --bs-text-inverse-accent: var(--bs-brand-colors-purple-600);
    --bs-text-neutral-default: var(--bs-neutral-300); --bs-text-neutral-hover: var(--bs-neutral-200); --bs-text-neutral-focused: var(--bs-neutral-200); --bs-text-neutral-pressed: var(--bs-neutral-50);

    --bs-surface-base: var(--bs-neutral-950); --bs-surface-raised: var(--bs-neutral-900); --bs-surface-container: var(--bs-neutral-900);
    --bs-surface-hover: var(--bs-neutral-800); --bs-surface-focus: var(--bs-neutral-800); --bs-surface-pressed: var(--bs-neutral-600);
    --bs-surface-selected: var(--bs-neutral-700); --bs-surface-selected-hover: var(--bs-neutral-700); --bs-surface-selected-focus: var(--bs-neutral-700);
    --bs-surface-selected-pressed: var(--bs-neutral-600); --bs-surface-active: var(--bs-neutral-600); --bs-surface-action: var(--bs-color-primary-default);
    --bs-surface-inset: var(--bs-neutral-900); --bs-surface-inverse: var(--bs-neutral-50-transparent); --bs-surface-accent: var(--bs-gray-transparent-2);
    --bs-surface-on-action: var(--bs-gray-900); --bs-surface-on-action-disabled: var(--bs-neutral-600); --bs-surface-action-disabled: var(--bs-neutral-900);
    --bs-surface-success: var(--bs-success-600); --bs-surface-info: var(--bs-information-600); --bs-surface-warning: var(--bs-warning-600); --bs-surface-error: var(--bs-error-600);
    --bs-surface-overlay: var(--bs-neutral-500-transparent-2); --bs-surface-overlay-level-2: var(--bs-neutral-500-transparent);

    --bs-icon-default: var(--bs-neutral-25); --bs-icon-muted: var(--bs-neutral-400); --bs-icon-disabled: var(--bs-neutral-600); --bs-icon-inverse: var(--bs-static-black);
    --bs-icon-action: var(--bs-brand-400); --bs-icon-action-hover: var(--bs-brand-300);
    --bs-icon-success: var(--bs-success-400); --bs-icon-info: var(--bs-information-300); --bs-icon-warning: var(--bs-warning-300); --bs-icon-error: var(--bs-error-300);
    --bs-icon-neutral-default: var(--bs-neutral-300); --bs-icon-neutral-hover: var(--bs-neutral-200); --bs-icon-neutral-focused: var(--bs-neutral-200); --bs-icon-neutral-pressed: var(--bs-neutral-50);

    --bs-border-default: var(--bs-neutral-800); --bs-border-neutral-hover: var(--bs-neutral-300); --bs-border-neutral-focus: var(--bs-brand-400);
    --bs-border-neutral-active: var(--bs-neutral-500); --bs-border-neutral-disabled: var(--bs-neutral-700); --bs-border-neutral-container: var(--bs-neutral-700);
    --bs-border-neutral-container-hover: var(--bs-neutral-500); --bs-border-neutral-container-focused: var(--bs-neutral-500); --bs-border-neutral-container-pressed: var(--bs-neutral-300);
    --bs-border-success: var(--bs-success-400); --bs-border-success-hover: var(--bs-success-300); --bs-border-success-focus: var(--bs-success-200);
    --bs-border-warning: var(--bs-warning-400); --bs-border-warning-hover: var(--bs-warning-300); --bs-border-warning-focus: var(--bs-warning-300);
    --bs-border-error: var(--bs-error-300); --bs-border-error-hover: var(--bs-error-200); --bs-border-error-focus: var(--bs-error-50);
    --bs-border-info: var(--bs-information-400); --bs-border-info-hover: var(--bs-information-600); --bs-border-info-focus: var(--bs-information-200);
    --bs-border-primary: var(--bs-brand-400); --bs-border-primary-hover: var(--bs-brand-300); --bs-border-primary-focus: var(--bs-brand-300); --bs-border-primary-pressed: var(--bs-brand-200);

    --bs-elevation-none: rgba(0, 0, 0, 0); --bs-elevation-low: rgba(0, 0, 0, 0.4); --bs-elevation-medium: rgba(0, 0, 0, 0.35); --bs-elevation-high: rgba(0, 0, 0, 0.3);
    --bs-elevation-higher: rgba(0, 0, 0, 0.25); --bs-elevation-highest: rgba(0, 0, 0, 0.2); --bs-elevation-inner: rgba(0, 1, 2, 0.05); --bs-elevation-focus: rgba(28, 133, 255, 0.05);

    --egup-chart-1: var(--bs-brand-400); --egup-chart-2: var(--bs-brand-colors-purple-400); --egup-chart-3: var(--bs-brand-colors-teal-400);
    --egup-chart-4: var(--bs-brand-colors-magenta-400); --egup-chart-5: var(--bs-brand-colors-amber-300);
}

/* ---- Component tokens (reference semantic tokens, so they follow the theme) ---- */
:root {
    --bs-input-bg-default: var(--bs-surface-base); --bs-input-bg-filled: var(--bs-surface-raised); --bs-input-bg-disabled: var(--bs-surface-action-disabled);
    --bs-input-border-default: var(--bs-border-neutral-container); --bs-input-border-hover: var(--bs-border-neutral-container-hover);
    --bs-input-border-focus: var(--bs-border-neutral-focus); --bs-input-border-disabled: var(--bs-border-neutral-disabled); --bs-input-border-error: var(--bs-border-error);
    --bs-input-text: var(--bs-text-default); --bs-input-text-success: var(--bs-text-success); --bs-input-text-disabled: var(--bs-text-on-disabled);
    --bs-input-placeholder: var(--bs-text-secondary); --bs-input-label: var(--bs-text-default); --bs-input-error: var(--bs-text-error);
    --bs-input-description: var(--bs-text-secondary); --bs-input-label-focus: var(--bs-color-primary-default);
    --bs-input-icon-error: var(--bs-icon-error); --bs-input-icon-success: var(--bs-icon-success); --bs-input-icon-disabled: var(--bs-icon-disabled);

    --bs-chip-text-default: var(--bs-text-default); --bs-chip-text-primary: var(--bs-text-default); --bs-chip-text-warning: var(--bs-text-warning);
    --bs-chip-text-success: var(--bs-text-success); --bs-chip-text-neutral: var(--bs-text-default); --bs-chip-text-info: var(--bs-text-info);
    --bs-chip-text-error: var(--bs-text-error); --bs-chip-text-disabled: var(--bs-text-on-disabled);
    --bs-chip-border-default: var(--bs-border-default); --bs-chip-border-focus: var(--bs-border-neutral-focus);
    --bs-chip-bg-default: var(--bs-surface-action-disabled); --bs-chip-bg-neutral-container: var(--bs-color-neutral-container);
    --bs-chip-bg-success-container: var(--bs-color-success-container); --bs-chip-bg-warning-container: var(--bs-color-warning-container);
    --bs-chip-bg-info-container: var(--bs-color-info-container); --bs-chip-bg-error-container: var(--bs-color-error-container);
    --bs-chip-bg-primary-container: var(--bs-color-primary-container); --bs-chip-bg-disabled: var(--bs-surface-action-disabled);
    --bs-chip-icon-success: var(--bs-icon-success); --bs-chip-icon-warning: var(--bs-icon-warning); --bs-chip-icon-info: var(--bs-icon-info);
    --bs-chip-icon-error: var(--bs-icon-error); --bs-chip-icon-disabled: var(--bs-icon-disabled);

    --bs-badge-bg-default: var(--bs-surface-action-disabled); --bs-badge-bg-primary: var(--bs-color-primary-default);
    --bs-badge-bg-success: var(--bs-color-success-default); --bs-badge-bg-warning: var(--bs-color-warning-default);
    --bs-badge-bg-info: var(--bs-color-info-default); --bs-badge-bg-error: var(--bs-color-error-default); --bs-badge-bg-neutral: var(--bs-color-neutral-default);
    --bs-badge-border-default: var(--bs-border-default); --bs-badge-text-default: var(--bs-text-default);

    --bs-paper-bg-base: var(--bs-surface-base); --bs-paper-bg-raised: var(--bs-surface-raised); --bs-paper-bg-container: var(--bs-surface-container);
    --bs-paper-bg-hover: var(--bs-surface-hover); --bs-paper-bg-disabled: var(--bs-surface-action-disabled); --bs-paper-border-surface: var(--bs-border-neutral-container);

    --bs-button-primary-default: var(--bs-color-primary-default); --bs-button-primary-hover: var(--bs-color-primary-hover);
    --bs-button-primary-focus: var(--bs-color-primary-focused); --bs-button-primary-pressed: var(--bs-color-primary-pressed);
    --bs-button-primary-disabled: var(--bs-surface-action-disabled); --bs-button-primary-container: var(--bs-color-primary-container);
    --bs-button-neutral-default: var(--bs-color-neutral-default); --bs-button-neutral-hover: var(--bs-color-neutral-hover);
    --bs-button-neutral-disabled: var(--bs-surface-action-disabled); --bs-button-neutral-container: var(--bs-color-neutral-container);

    --bs-switch-track-bg-default: var(--bs-surface-active); --bs-switch-track-bg-checked-default: var(--bs-color-primary-default);
    --bs-switch-thumb-bg-default: var(--bs-surface-base); --bs-switch-track-border-default: var(--bs-border-neutral-container);
    --bs-radio-selected-border-default: var(--bs-border-primary); --bs-radio-enabled-border-default: var(--bs-border-default);
    --bs-radio-focus-ring: var(--bs-border-neutral-focus);
    --bs-avatar-text-primary: var(--bs-text-action); --bs-avatar-border-primary: var(--bs-border-neutral-container); --bs-avatar-bg-dafault: var(--bs-surface-raised);
}