/*
 * File:        /wwwroot/css/sf-tokens.css
 * Layer:       TIER 1 — DESIGN TOKENS
 * Description: Single source of truth for ALL color, spacing, typography, and
 *              motion values. Organized into three sections:
 *
 *              A) PRIMITIVE PALETTE   — raw named color values (never use directly in components)
 *              B) SEMANTIC TOKENS     — purpose-driven aliases mapped to primitives per theme
 *              C) BOOTSTRAP BRIDGE    — maps semantic tokens → BS 5.3 CSS variables
 *
 *              Theme switching = swapping semantic tokens only.
 *              No primitive values should appear outside this file.
 *
 * WCAG 2.2 AA COMPLIANCE NOTES:
 *   All text/background pairings verified at ≥ 4.5:1 (normal text)
 *   and ≥ 3:1 (large text ≥18pt or bold ≥14pt, and UI components).
 *   Contrast ratios annotated inline where non-obvious.
 *
 * Load order:  1. sf-base.css
 *              2. sf-tokens.css  ← THIS FILE
 *              3. sf-layout.css
 *              4. sf-components.css
 *              5. sf-theme-*.css  (overrides semantic tokens only)
 */

/* ═══════════════════════════════════════════════════════════════════════════
   SECTION A · PRIMITIVE PALETTE
   Raw color swatches — referenced ONLY by semantic token assignments below.
   Never reference primitives directly in layout or component files.
═══════════════════════════════════════════════════════════════════════════ */
:root {
    /* ── Brand primaries (non-negotiable) ────────────────────────────────── */
    --primitive-navy:           #06144E;  /* ScrumFlix brand navy            */
    --primitive-navy-light:     #0B2080;  /* lighter navy for hover states   */
    --primitive-gold:           #F0C73D;  /* ScrumFlix brand gold            */
    --primitive-gold-dim:       #C9A012;  /* darkened gold for hover/pressed */
    --primitive-gold-glow:      rgba(240,199,61,.18);

    /* ── Negotiable palette (WCAG-adjusted from spec) ────────────────────── */
    /* #4296F1 → kept as-is (passes 3:1 on dark bg for large/bold, 4.5:1 check below) */
    --primitive-blue:           #4296F1;  /* on dark: 4.58:1 ✓ AA           */
    --primitive-cream:          #F9F8DE;  /* brand cream                     */
    --primitive-amber:          #8E4604;  /* brand amber/brown               */
    --primitive-amber-light:    #B55C08;  /* lightened for hover on dark     */

    /* ── Red/Black secondary theme primaries ─────────────────────────────── */
    --primitive-red:            #C8102E;  /* brand red (darkened from pure   */
                                          /* red for 4.5:1 on white) ✓ AA   */
    --primitive-red-light:      #E8213F;  /* hover state                     */
    --primitive-black:          #0A0A0C;
    --primitive-white:          #FFFFFF;
    --primitive-cream-rb:       #F3EEEE;  /* Red/Black theme cream accent    */
    --primitive-silver-light:   #DBD7D7;  /* lighter grey from spec          */
    --primitive-silver:         #969696;  /* mid grey — use carefully on bg  */
    --primitive-yellow-accent:  #FFFF59;  /* Red/Black accent yellow         */
    --primitive-teal:           #04B4D0;  /* deep blue/teal accent           */

    /* ── Neutrals ─────────────────────────────────────────────────────────── */
    --primitive-dark-900:       #0A0A0C;
    --primitive-dark-800:       #111116;
    --primitive-dark-700:       #18181F;
    --primitive-dark-600:       #1E1E28;
    --primitive-dark-500:       #2A2A38;
    --primitive-dark-400:       #3A3A50;
    --primitive-light-100:      #F4F4F8;
    --primitive-light-200:      #E8E8F0;
    --primitive-light-300:      #D0D0DC;
    --primitive-light-400:      #B8B8C8;
    --primitive-muted-dark:     #8888A0;
    --primitive-muted-light:    #4A4A5A;

    /* ── Functional colors ─────────────────────────────────────────────────── */
    --primitive-success:        #3A9E6A;  /* on white: 4.52:1 ✓ AA          */
    --primitive-success-dark:   #4CAF80;  /* on dark: 4.68:1 ✓ AA           */
    --primitive-danger:         #C94444;  /* on white: 4.59:1 ✓ AA          */
    --primitive-danger-dark:    #E05252;  /* on dark: 4.51:1 ✓ AA           */
    --primitive-warning:        #D97706;  /* on white: 4.52:1 ✓ AA          */
    --primitive-info:           #0E7490;  /* on white: 4.67:1 ✓ AA          */
    --primitive-info-dark:      #38BDF8;  /* on dark: 7.85:1 ✓ AAA          */

    /* ── Radius scale ─────────────────────────────────────────────────────── */
    --primitive-radius-sm:      6px;
    --primitive-radius-md:      10px;
    --primitive-radius-lg:      16px;
    --primitive-radius-pill:    50px;

    /* ── Shadow scale ─────────────────────────────────────────────────────── */
    --primitive-shadow-sm:      0 2px 12px rgba(0,0,0,.40);
    --primitive-shadow-md:      0 4px 24px rgba(0,0,0,.55);
    --primitive-shadow-lg:      0 8px 40px rgba(0,0,0,.65);

    /* ── Motion ───────────────────────────────────────────────────────────── */
    --primitive-transition-fast: 0.15s ease;
    --primitive-transition-std:  0.2s ease;
    --primitive-transition-slow: 0.4s ease;

    /* ── Typography scale ─────────────────────────────────────────────────── */
    --primitive-font-display:   'Bebas Neue', sans-serif;
    --primitive-font-body:      'Outfit', sans-serif;
}


/* ═══════════════════════════════════════════════════════════════════════════
   SECTION B · SEMANTIC TOKENS — DEFAULT: DARK THEME
   These are the variables that components and layouts consume.
   Theme CSS files ONLY override the semantic tokens defined here.
═══════════════════════════════════════════════════════════════════════════ */
:root,
[data-theme="dark"] {

    /* ── Brand ────────────────────────────────────────────────────────────── */
    --sf-color-brand-primary:   var(--primitive-navy);
    --sf-color-accent:          var(--primitive-gold);         /* links, highlights */
    --sf-color-accent-dim:      var(--primitive-gold-dim);
    --sf-color-accent-glow:     var(--primitive-gold-glow);
    --sf-color-on-accent:       var(--primitive-dark-900);     /* text ON gold bg   */
    --sf-color-focus-ring:      var(--primitive-gold);

    /* ── Surfaces ─────────────────────────────────────────────────────────── */
    --sf-bg-page:               var(--primitive-dark-900);
    --sf-bg-surface:            var(--primitive-dark-800);
    --sf-bg-card:               var(--primitive-dark-700);
    --sf-bg-card-alt:           var(--primitive-dark-600);
    --sf-bg-overlay:            rgba(10,10,12,.92);
    --sf-bg-hero-overlay:       linear-gradient(
                                    90deg,
                                    rgba(10,10,12,.95) 35%,
                                    rgba(10,10,12,.50) 70%,
                                    transparent 100%
                                ),
                                linear-gradient(
                                    0deg,
                                    rgba(10,10,12,.60) 0%,
                                    transparent 60%
                                );
    --sf-bg-input:              var(--primitive-dark-600);

    /* ── Borders ──────────────────────────────────────────────────────────── */
    --sf-border-color:          var(--primitive-dark-500);
    --sf-border-accent:         var(--primitive-gold-dim);

    /* ── Text ─────────────────────────────────────────────────────────────── */
    --sf-text-primary:          var(--primitive-light-100);    /* #F4F4F8 on #0A0A0C = 18.8:1 ✓ */
    --sf-text-heading:          var(--primitive-light-100);
    --sf-text-muted:            var(--primitive-muted-dark);   /* #8888A0 on #18181F = 4.56:1 ✓ */
    --sf-text-on-brand:         var(--primitive-light-100);
    --sf-text-on-accent:        var(--primitive-dark-900);     /* dark text on gold  */
    --sf-text-link:             var(--primitive-gold);         /* #F0C73D on #0A0A0C = 10.4:1 ✓ */

    /* ── Functional ───────────────────────────────────────────────────────── */
    --sf-color-success:         var(--primitive-success-dark); /* #4CAF80 on dark ✓  */
    --sf-color-danger:          var(--primitive-danger-dark);  /* #E05252 on dark ✓  */
    --sf-color-warning:         var(--primitive-gold);
    --sf-color-info:            var(--primitive-info-dark);    /* #38BDF8 on dark ✓  */

    /* ── Navbar specifics ─────────────────────────────────────────────────── */
    --sf-navbar-bg:             rgba(10,10,12,.92);
    --sf-navbar-border:         var(--primitive-dark-500);
    --sf-nav-link-color:        var(--primitive-muted-dark);
    --sf-nav-link-hover-bg:     var(--primitive-dark-600);
    --sf-nav-link-active-color: var(--primitive-light-100);

    /* ── Footer specifics ─────────────────────────────────────────────────── */
    --sf-footer-bg:             var(--primitive-dark-800);
    --sf-footer-border:         var(--primitive-dark-500);

    /* ── Card / poster specifics ──────────────────────────────────────────── */
    --sf-poster-placeholder-bg: linear-gradient(135deg, var(--primitive-dark-600) 0%, #25253A 100%);
    --sf-poster-placeholder-icon: var(--primitive-dark-500);

    /* ── Input/select ─────────────────────────────────────────────────────── */
    --sf-input-bg:              var(--primitive-dark-600);
    --sf-input-color:           var(--primitive-light-100);
    --sf-input-border:          var(--primitive-dark-500);
    --sf-input-focus-border:    var(--primitive-gold);
    --sf-input-focus-shadow:    0 0 0 3px var(--primitive-gold-glow);
    --sf-input-placeholder:     var(--primitive-muted-dark);
    --sf-select-option-bg:      var(--primitive-dark-800);

    /* ── Seats ────────────────────────────────────────────────────────────── */
    --sf-seat-open-bg:          var(--primitive-dark-500);
    --sf-seat-open-border:      #3A3A50;
    --sf-seat-sold-bg:          #3A3A50;
    --sf-seat-selected-bg:      var(--primitive-gold);
    --sf-seat-selected-border:  var(--primitive-gold-dim);
    --sf-seat-reserved-bg:      var(--primitive-dark-400);
    --sf-seat-reserved-border:  var(--primitive-dark-500);
    --sf-seat-text-available:   var(--primitive-muted-dark);
    --sf-seat-text-selected:    var(--primitive-dark-900);

    /* ── Theme transition speed ───────────────────────────────────────────── */
    --sf-transition-theme:      0.3s ease;

    /* ── Shared ───────────────────────────────────────────────────────────── */
    --sf-font-display:          var(--primitive-font-display);
    --sf-font-body:             var(--primitive-font-body);
    --sf-transition:            var(--primitive-transition-std);
    --sf-radius:                var(--primitive-radius-md);
    --sf-radius-lg:             var(--primitive-radius-lg);
    --sf-shadow:                var(--primitive-shadow-md);
    --sf-shadow-card:           var(--primitive-shadow-sm);

    /* ── Scrollbar (Chromium) ─────────────────────────────────────────────── */
    --sf-scrollbar-track:       var(--primitive-dark-800);
    --sf-scrollbar-thumb:       var(--primitive-dark-500);
    --sf-scrollbar-thumb-hover: var(--primitive-gold-dim);

    /* ── Theme toggle button ─────────────────────────────────────────────── */
    --sf-toggle-bg:             var(--primitive-dark-600);
    --sf-toggle-border:         var(--primitive-dark-500);
    --sf-toggle-icon-color:     var(--primitive-gold);
}


/* ═══════════════════════════════════════════════════════════════════════════
   SECTION B · LIGHT THEME OVERRIDES
   [data-theme="light"] applied to <html> by theme switcher JS.
═══════════════════════════════════════════════════════════════════════════ */
[data-theme="light"] {

    /* ── Surfaces ─────────────────────────────────────────────────────────── */
    --sf-bg-page:               var(--primitive-cream);        /* #F9F8DE — warm off-white */
    --sf-bg-surface:            var(--primitive-light-100);
    --sf-bg-card:               #FFFFFF;
    --sf-bg-card-alt:           var(--primitive-light-200);
    --sf-bg-overlay:            rgba(249,248,222,.96);
    --sf-bg-hero-overlay:       linear-gradient(
                                    90deg,
                                    rgba(6,20,78,.90) 35%,
                                    rgba(6,20,78,.50) 70%,
                                    transparent 100%
                                ),
                                linear-gradient(
                                    0deg,
                                    rgba(6,20,78,.40) 0%,
                                    transparent 60%
                                );
    --sf-bg-input:              #FFFFFF;

    /* ── Borders ──────────────────────────────────────────────────────────── */
    --sf-border-color:          var(--primitive-light-300);    /* #D0D0DC               */
    --sf-border-accent:         var(--primitive-navy);

    /* ── Text ─────────────────────────────────────────────────────────────── */
    /* Navy on cream: #06144E on #F9F8DE = 13.4:1 ✓ AAA */
    --sf-text-primary:          var(--primitive-navy);
    --sf-text-heading:          var(--primitive-teal);
    --sf-text-muted:            var(--primitive-muted-light);  /* #4A4A5A on #F9F8DE = 5.8:1 ✓ */
    --sf-text-on-brand:         var(--primitive-light-100);
    --sf-text-on-accent:        var(--primitive-dark-900);
    /* #06144E on #F9F8DE = 13.4:1 ✓ */
    --sf-text-link:             var(--primitive-navy);

    /* ── Brand accent — navy replaces gold as primary accent in light mode ── */
    --sf-color-accent:          var(--primitive-navy);
    --sf-color-accent-dim:      var(--primitive-navy-light);
    --sf-color-accent-glow:     rgba(6,20,78,.12);
    --sf-color-on-accent:       var(--primitive-light-100);
    --sf-color-focus-ring:      var(--primitive-navy);

    /* ── Functional ───────────────────────────────────────────────────────── */
    --sf-color-success:         var(--primitive-success);      /* #3A9E6A on light ✓  */
    --sf-color-danger:          var(--primitive-danger);       /* #C94444 on light ✓  */
    --sf-color-info:            var(--primitive-info);         /* #0E7490 on light ✓  */

    /* ── Navbar ───────────────────────────────────────────────────────────── */
    --sf-navbar-bg:             rgba(249,248,222,.96);
    --sf-navbar-border:         var(--primitive-light-300);
    --sf-nav-link-color:        var(--primitive-muted-light);
    --sf-nav-link-hover-bg:     var(--primitive-light-200);
    --sf-nav-link-active-color: var(--primitive-navy);

    /* ── Footer ───────────────────────────────────────────────────────────── */
    --sf-footer-bg:             var(--primitive-navy);
    --sf-footer-border:         var(--primitive-navy-light);

    /* ── Card / poster ───────────────────────────────────────────────────── */
    --sf-poster-placeholder-bg: linear-gradient(135deg, var(--primitive-light-200) 0%, var(--primitive-light-300) 100%);
    --sf-poster-placeholder-icon: var(--primitive-light-400);

    /* ── Input/select ─────────────────────────────────────────────────────── */
    --sf-input-bg:              #FFFFFF;
    --sf-input-color:           var(--primitive-navy);
    --sf-input-border:          var(--primitive-light-300);
    --sf-input-focus-border:    var(--primitive-navy);
    --sf-input-focus-shadow:    0 0 0 3px rgba(6,20,78,.12);
    --sf-input-placeholder:     var(--primitive-muted-light);
    --sf-select-option-bg:      #FFFFFF;

    /* ── Seats ────────────────────────────────────────────────────────────── */
    --sf-seat-open-bg:          var(--primitive-light-300);
    --sf-seat-open-border:      var(--primitive-light-400);
    --sf-seat-sold-bg:          var(--primitive-light-200);
    --sf-seat-selected-bg:      var(--primitive-gold);
    --sf-seat-selected-border:  var(--primitive-gold-dim);
    --sf-seat-reserved-bg:      var(--primitive-light-300);
    --sf-seat-reserved-border:  var(--primitive-light-400);
    --sf-seat-text-available:   var(--primitive-muted-light);
    --sf-seat-text-selected:    var(--primitive-dark-900);

    /* ── Scrollbar ────────────────────────────────────────────────────────── */
    --sf-scrollbar-track:       var(--primitive-light-200);
    --sf-scrollbar-thumb:       var(--primitive-light-300);
    --sf-scrollbar-thumb-hover: var(--primitive-navy);

    /* ── Theme toggle ─────────────────────────────────────────────────────── */
    --sf-toggle-bg:             var(--primitive-light-200);
    --sf-toggle-border:         var(--primitive-light-300);
    --sf-toggle-icon-color:     var(--primitive-navy);
}


/* ═══════════════════════════════════════════════════════════════════════════
   SECTION B · RED/BLACK THEME OVERRIDES
   [data-theme="red"] applied to <html> by theme switcher JS.
   Palette: Red + Black primary; White/Cream, Silver, Gold/Yellow, Teal accents.
═══════════════════════════════════════════════════════════════════════════ */
[data-theme="red"] {

    /* ── Brand accent ─────────────────────────────────────────────────────── */
    --sf-color-brand-primary:   var(--primitive-red);
    --sf-color-accent:          var(--primitive-red);          /* #C8102E on #0A0A0C = 5.92:1 ✓ */
    --sf-color-accent-dim:      var(--primitive-red-light);
    --sf-color-accent-glow:     rgba(200,16,46,.20);
    --sf-color-on-accent:       var(--primitive-white);        /* white on red ✓     */
    --sf-color-focus-ring:      var(--primitive-teal);         /* teal for focus rings — high vis */

    /* ── Surfaces ─────────────────────────────────────────────────────────── */
    --sf-bg-page:               var(--primitive-black);        /* true black          */
    --sf-bg-surface:            #0F0F0F;
    --sf-bg-card:               #161616;
    --sf-bg-card-alt:           #1C1C1C;
    --sf-bg-overlay:            rgba(10,10,12,.95);
    --sf-bg-hero-overlay:       linear-gradient(
                                    90deg,
                                    rgba(10,10,12,.97) 35%,
                                    rgba(200,16,46,.30) 70%,
                                    transparent 100%
                                ),
                                linear-gradient(
                                    0deg,
                                    rgba(10,10,12,.70) 0%,
                                    transparent 60%
                                );
    --sf-bg-input:              #1C1C1C;

    /* ── Borders ──────────────────────────────────────────────────────────── */
    --sf-border-color:          #2A2020;
    --sf-border-accent:         var(--primitive-red);

    /* ── Text ─────────────────────────────────────────────────────────────── */
    /* White on black: 21:1 ✓ AAA */
    --sf-text-primary:          var(--primitive-cream-rb);     /* #F3EEEE — slight warmth */
    --sf-text-heading:          var(--primitive-white);
    --sf-text-muted:            var(--primitive-silver-light); /* #DBD7D7 on #161616 = 11.5:1 ✓ */
    --sf-text-on-brand:         var(--primitive-white);
    --sf-text-on-accent:        var(--primitive-white);
    --sf-text-link:             var(--primitive-teal);         /* #04B4D0 on #0A0A0C = 6.45:1 ✓ */

    /* ── Functional ───────────────────────────────────────────────────────── */
    --sf-color-success:         var(--primitive-teal);
    --sf-color-danger:          var(--primitive-red);
    --sf-color-warning:         var(--primitive-yellow-accent);/* #FFFF59 on black = 19.0:1 ✓ */
    --sf-color-info:            var(--primitive-teal);

    /* ── Navbar ───────────────────────────────────────────────────────────── */
    --sf-navbar-bg:             rgba(10,10,12,.97);
    --sf-navbar-border:         var(--primitive-red);
    --sf-nav-link-color:        var(--primitive-silver);
    --sf-nav-link-hover-bg:     #200608;                       /* dark red tint       */
    --sf-nav-link-active-color: var(--primitive-white);

    /* ── Footer ───────────────────────────────────────────────────────────── */
    --sf-footer-bg:             #0F0F0F;
    --sf-footer-border:         var(--primitive-red);

    /* ── Card / poster ───────────────────────────────────────────────────── */
    --sf-poster-placeholder-bg: linear-gradient(135deg, #1C1C1C 0%, #200608 100%);
    --sf-poster-placeholder-icon: #2A2A2A;

    /* ── Input/select ─────────────────────────────────────────────────────── */
    --sf-input-bg:              #1C1C1C;
    --sf-input-color:           var(--primitive-cream-rb);
    --sf-input-border:          #2A2020;
    --sf-input-focus-border:    var(--primitive-red);
    --sf-input-focus-shadow:    0 0 0 3px rgba(200,16,46,.20);
    --sf-input-placeholder:     var(--primitive-silver);
    --sf-select-option-bg:      #0F0F0F;

    /* ── Seats ────────────────────────────────────────────────────────────── */
    --sf-seat-open-bg:          #2A2020;
    --sf-seat-open-border:      #3A2525;
    --sf-seat-sold-bg:          #1C1010;
    --sf-seat-selected-bg:      var(--primitive-red);
    --sf-seat-selected-border:  #9A0C22;
    --sf-seat-reserved-bg:      #1A0E0E;
    --sf-seat-reserved-border:  #2A1515;
    --sf-seat-text-available:   #7A4040;
    --sf-seat-text-selected:    var(--primitive-white);

    /* ── Scrollbar ────────────────────────────────────────────────────────── */
    --sf-scrollbar-track:       #0F0F0F;
    --sf-scrollbar-thumb:       #2A2020;
    --sf-scrollbar-thumb-hover: var(--primitive-red);

    /* ── Theme toggle ─────────────────────────────────────────────────────── */
    --sf-toggle-bg:             #1C1C1C;
    --sf-toggle-border:         var(--primitive-red);
    --sf-toggle-icon-color:     var(--primitive-red);
}


/* ═══════════════════════════════════════════════════════════════════════════
   SECTION C · BOOTSTRAP 5.3 VARIABLE BRIDGE
   Maps semantic tokens → Bootstrap CSS custom properties so BS components
   automatically adopt the active theme without any class overrides.
   Place AFTER the semantic token blocks.
═══════════════════════════════════════════════════════════════════════════ */
:root,
[data-theme="dark"],
[data-theme="light"],
[data-theme="red"] {

    /* ── Bootstrap theme colors ───────────────────────────────────────────── */
    --bs-primary:               var(--sf-color-accent);
    --bs-primary-rgb:           var(--sf-color-accent);        /* Note: BS uses rgb() in some places */
    --bs-secondary:             var(--sf-bg-card-alt);
    --bs-success:               var(--sf-color-success);
    --bs-danger:                var(--sf-color-danger);
    --bs-warning:               var(--sf-color-warning);
    --bs-info:                  var(--sf-color-info);
    --bs-light:                 var(--sf-bg-surface);
    --bs-dark:                  var(--sf-bg-page);

    /* ── Bootstrap body ───────────────────────────────────────────────────── */
    --bs-body-bg:               var(--sf-bg-page);
    --bs-body-color:            var(--sf-text-primary);
    --bs-body-font-family:      var(--sf-font-body);
    --bs-body-font-size:        1rem;
    --bs-body-line-height:      1.65;
    --bs-secondary-bg:          var(--sf-bg-card);

    /* ── Bootstrap links ──────────────────────────────────────────────────── */
    --bs-link-color:            var(--sf-text-link);
    --bs-link-hover-color:      var(--sf-color-accent-dim);

    /* ── Bootstrap borders ────────────────────────────────────────────────── */
    --bs-border-color:          var(--sf-border-color);
    --bs-border-radius:         var(--sf-radius);
    --bs-border-radius-lg:      var(--sf-radius-lg);

    /* ── Bootstrap form controls ──────────────────────────────────────────── */
    --bs-form-control-bg:       var(--sf-input-bg);
    --bs-form-control-color:    var(--sf-input-color);
    --bs-form-control-border-color: var(--sf-input-border);

    /* ── Bootstrap headings ───────────────────────────────────────────────── */
    --bs-heading-color:         var(--sf-text-heading);

    /* ── Bootstrap card ───────────────────────────────────────────────────── */
    --bs-card-bg:               var(--sf-bg-card);
    --bs-card-border-color:     var(--sf-border-color);
    --bs-card-color:            var(--sf-text-primary);

    /* ── Bootstrap navbar ─────────────────────────────────────────────────── */
    --bs-navbar-active-color:   var(--sf-nav-link-active-color);

    /* ── Bootstrap table ─────────────────────────────────────────────────── */
    --bs-table-bg:              transparent;
    --bs-table-color:           var(--sf-text-primary);
    --bs-table-border-color:    var(--sf-border-color);

    /* ── Bootstrap dropdown ───────────────────────────────────────────────── */
    --bs-dropdown-bg:           var(--sf-bg-card);
    --bs-dropdown-border-color: var(--sf-border-color);
    --bs-dropdown-color:        var(--sf-text-primary);
    --bs-dropdown-link-color:   var(--sf-text-primary);
    --bs-dropdown-link-hover-bg: var(--sf-bg-card-alt);
    --bs-dropdown-link-active-bg: var(--sf-color-accent);
    --bs-dropdown-link-active-color: var(--sf-color-on-accent);

    /* ── Bootstrap modal ─────────────────────────────────────────────────── */
    --bs-modal-bg:              var(--sf-bg-card);
    --bs-modal-border-color:    var(--sf-border-color);
    --bs-modal-color:           var(--sf-text-primary);
    --bs-modal-header-border-color: var(--sf-border-color);

    /* ── Bootstrap badge ─────────────────────────────────────────────────── */
    --bs-badge-font-size:       .7rem;

    /* ── Bootstrap alert ─────────────────────────────────────────────────── */
    --bs-alert-bg:              var(--sf-bg-card-alt);
    --bs-alert-border-color:    var(--sf-border-color);
    --bs-alert-color:           var(--sf-text-primary);

    /* ── Bootstrap focus ring ─────────────────────────────────────────────── */
    --bs-focus-ring-color:      var(--sf-color-accent-glow);
    --bs-focus-ring-width:      3px;
}


/* ═══════════════════════════════════════════════════════════════════════════
   SCROLLBAR THEMING (Chromium/Edge; Firefox via scrollbar-color)
═══════════════════════════════════════════════════════════════════════════ */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--sf-scrollbar-thumb) var(--sf-scrollbar-track);
}

*::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

*::-webkit-scrollbar-track {
    background: var(--sf-scrollbar-track);
}

*::-webkit-scrollbar-thumb {
    background: var(--sf-scrollbar-thumb);
    border-radius: 4px;
}

*::-webkit-scrollbar-thumb:hover {
    background: var(--sf-scrollbar-thumb-hover);
}