/* ═══════════════════════════════════════════════════════════════════════════
   COLOUR PALETTE — Single source of truth
   ═══════════════════════════════════════════════════════════════════════════
   This file overrides the theme defaults from style.bundle.css.
   Load it AFTER style.bundle.css so these values win.

   To change a colour:  edit it here → every badge, button, alert,
   border, and background that references it updates automatically.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Theme base (overridden by theme-colours.css or JS for custom hex) ── */
:root { --theme-base: #f7941d; }

/* ── Tint scale — derived from --theme-base via color-mix ── */
:root,
[data-bs-theme=light] {
  --scale-50:  color-mix(in oklab, var(--theme-base) 8%, white);
  --scale-100: color-mix(in oklab, var(--theme-base) 16%, white);
  --scale-200: color-mix(in oklab, var(--theme-base) 30%, white);
  --scale-300: color-mix(in oklab, var(--theme-base) 48%, white);
  --scale-400: color-mix(in oklab, var(--theme-base) 72%, white);
  --scale-500: var(--theme-base);
  --scale-600: color-mix(in oklab, var(--theme-base) 82%, black);
  --scale-700: color-mix(in oklab, var(--theme-base) 64%, black);
  --scale-800: color-mix(in oklab, var(--theme-base) 46%, black);
  --scale-900: color-mix(in oklab, var(--theme-base) 30%, black);

  /* Deepened primary — always darkened, never flips in dark mode.
     Used for solid interactive fills (buttons, toggles) where a white
     element (text, knob) must contrast against the coloured background. */
  --primary-deep:       color-mix(in oklab, var(--theme-base) 64%, black);
  --primary-deep-hover: color-mix(in oklab, var(--theme-base) 46%, black);
}

/* ── Light mode ── */
:root,
[data-bs-theme=light] {

  /* Brand — derived from tint scale
     --bs-primary-rgb and --bs-primary-inverse are set by JS (theme-colour-init)
     for non-default themes. Fallback values here are for the default orange. */
  --bs-primary:           var(--scale-500);
  --bs-primary-rgb:       247, 148, 29;
  --bs-primary-active:    var(--scale-600);
  --bs-primary-light:     var(--scale-50);
  --bs-primary-inverse:   #ffffff;

  /* Success (green) — vibrant mint-teal */
  --bs-success:           #28CB9B;
  --bs-success-rgb:       40, 203, 155;
  --bs-success-active:    #20b387;
  --bs-success-light:     #e8faf4;
  --bs-success-inverse:   #ffffff;

  /* Info (purple) */
  --bs-info:              #7239EA;
  --bs-info-rgb:          114, 57, 234;
  --bs-info-active:       #8B5CF6;
  --bs-info-light:        #f1ecff;
  --bs-info-inverse:      #ffffff;

  /* Warning (amber) */
  --bs-warning:           #D97706;
  --bs-warning-rgb:       217, 119, 6;
  --bs-warning-active:    #B45309;
  --bs-warning-light:     #FEF3C7;
  --bs-warning-inverse:   #ffffff;

  /* Danger (red) */
  --bs-danger:            #F8285A;
  --bs-danger-rgb:        248, 40, 90;
  --bs-danger-active:     #E0264F;
  --bs-danger-light:      #FFEEF3;
  --bs-danger-inverse:    #ffffff;

  /* Green (true green — court matched, positive states) */
  --bs-success-green:     #6bd368;
  --bs-green:             #198754;
  --bs-green-rgb:         25, 135, 84;
  --bs-green-light:       #28CB9B;

  /* Teal */
  --bs-teal:              #20c997;
  --bs-teal-rgb:          32, 201, 151;

  /* Neutrals */
  --bs-dark:              #1E2129;
  --bs-dark-rgb:          30, 33, 41;
  --bs-dark-light:        #F1F1F4;
  --bs-dark-inverse:      #ffffff;
  --bs-light:             #F9F9F9;
  --bs-light-rgb:         250, 250, 250;
  --bs-secondary:         #F1F1F4;
  --bs-secondary-rgb:     241, 241, 244;

  /* Layout tokens — own these so removing Metronic Tailwind doesn't break anything.
     Ink values are Attio-derived (see docs/style-guide.md §6.5, §12 Phase 4). */
  --background:           #ffffff;
  --foreground:           #1a1c1e;
  --foreground-soft:      #3c3f44;
  --card:                 #ffffff;
  --card-foreground:      #1a1c1e;
  --popover:              #ffffff;
  --popover-foreground:   #1a1c1e;
  --primary:              var(--bs-primary);
  --primary-foreground:   var(--bs-primary-inverse);
  --secondary:            #f8f8f8;
  --secondary-foreground: #18181b;
  --muted:                #f4f4f5;
  --muted-foreground:     #6b7076;
  --muted-foreground-faint: #9a9ea6;
  --accent:               #f4f4f5;
  --accent-foreground:    #18181b;
  --destructive:          #dc2626;
  --destructive-foreground: #ffffff;
  --mono:                 #1a1c1e;
  --mono-foreground:      #ffffff;
  --border:               #e4e4e7;
  --input:                #e4e4e7;
  --ring:                 #a1a1aa;
  --radius:               0.5rem;

  /* Gray scale (Metronic/Bootstrap) */
  --bs-gray-50:           #FCFCFC;
  --bs-gray-100:          #F9F9F9;
  --bs-gray-100-rgb:      249, 249, 249;
  --bs-gray-200:          #F1F1F4;
  --bs-gray-200-rgb:      241, 241, 244;
  --bs-gray-300:          #DBDFE9;
  --bs-gray-300-rgb:      219, 223, 233;
  --bs-gray-400:          #C4CADA;
  --bs-gray-400-rgb:      196, 202, 218;
  --bs-gray-500:          #99A1B7;
  --bs-gray-500-rgb:      153, 161, 183;
  --bs-gray-600:          #78829D;
  --bs-gray-600-rgb:      120, 130, 157;
  --bs-gray-700:          #4B5675;
  --bs-gray-800:          #252F4A;
  --bs-gray-900:          #071437;
  --bs-gray-950:          #030712;

  /* Bootstrap utility tokens */
  --bs-white:             #ffffff;
  --bs-white-rgb:         255, 255, 255;
  --bs-border-color:      #F1F1F4;
  --bs-page-bg:           #F5F5F5;
  --bs-secondary-inverse: #ffffff;
  --bs-light-inverse:     #071437;
  --bs-text-white:        #ffffff;
  --bs-text-muted:        var(--bs-gray-500);

  /* Slate scale (Tailwind — used in GOAT, admin, emails, tools) */
  --slate-50:             #FBFBFC;
  --slate-100:            #f1f5f9;
  --slate-200:            #e2e8f0;
  --slate-300:            #cbd5e1;
  --slate-400:            #94a3b8;
  --slate-500:            #64748b;
  --slate-600:            #475569;
  --slate-700:            #334155;
  --slate-800:            #1e293b;
  --slate-900:            #0f172a;

  /* Accent greens (various shades used for positive/matched states) */
  --green-500:            #22c55e;
  --green-500-rgb:        34, 197, 94;
  --green-600:            #16a34a;
  --green-600-rgb:        22, 163, 74;
  --emerald-500:          #10b981;
  --emerald-500-rgb:      16, 185, 129;
  --emerald-600:          #059669;
  --emerald-600-rgb:      5, 150, 105;

  /* Accent reds (danger/error alternatives) */
  --red-500:              #ef4444;
  --red-500-rgb:          239, 68, 68;
  --red-600:              #dc2626;
  --red-600-rgb:          220, 38, 38;

  /* Accent blues */
  --blue-500:             #3b82f6;
  --blue-500-rgb:         59, 130, 246;
  --blue-600:             #2563eb;
  --blue-600-rgb:         37, 99, 235;

  /* Accent ambers */
  --amber-400:            #fbbf24;
  --amber-500:            #f59e0b;
  --amber-500-rgb:        245, 158, 11;
  --amber-600:            #d97706;
  --amber-600-rgb:        217, 119, 6;
  --amber-700:            #b45309;
  --amber-800:            #92400e;

  /* Accent violets */
  --violet-400:           #a78bfa;
  --violet-500:           #8b5cf6;
  --violet-500-rgb:       139, 92, 246;
  --violet-600:           #7c3aed;

  /* Accent light shades (dark mode bright tints) */
  --green-400:            #4ade80;
  --red-400:              #f87171;
  --blue-400:             #60a5fa;

  /* Typography tokens are in global/typography.css */

  /* ── Ink hierarchy — LEGACY aliases (see §12 Phase 4).
     Canonical tokens are --foreground / --foreground-soft /
     --muted-foreground / --muted-foreground-faint above.
     New code MUST use the canonical names. ── */
  --color-ink:            var(--foreground);
  --color-ink-light:      var(--foreground-soft);
  --color-ink-muted:      var(--muted-foreground);
  --color-ink-faint:      var(--muted-foreground-faint);
  --color-card:           var(--card);

  /* ── Radius ── */
  --radius-sm:            8px;
  --radius-md:            12px;
  --radius-lg:            16px;
  --radius-xl:            24px;
  --radius-full:          9999px;

  /* ── Shadows ── */
  --shadow-sm:            0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md:            0 4px 12px rgba(0, 0, 0, 0.06);
  --shadow-lg:            0 8px 24px rgba(0, 0, 0, 0.08);
  --shadow-hover:         0 2px 8px rgba(0, 0, 0, 0.06);

  /* ── Bootstrap text colour → ink hierarchy ── */
  --bs-body-color:          var(--color-ink-light);
  --bs-body-color-rgb:      60, 63, 68;
  --bs-secondary-color:     var(--color-ink-muted);
  --bs-secondary-color-rgb: 107, 112, 118;
  --bs-tertiary-color:      var(--color-ink-faint);
  --bs-tertiary-color-rgb:  154, 158, 166;
  --bs-emphasis-color:      var(--color-ink);
  --bs-emphasis-color-rgb:  26, 28, 30;

  /* ── Tailwind --primary bridge (shadcn/Metronic use this) ── */
  --primary:            var(--bs-primary);

  /* ── Text utility overrides (Metronic hardcodes these — alias to --bs-*) ── */
  --bs-text-primary:    var(--bs-primary);
  --bs-text-success:    var(--bs-success);
  --bs-text-info:       var(--bs-info);
  --bs-text-warning:    var(--bs-warning);
  --bs-text-danger:     var(--bs-danger);

  /* ── Heading / link colour (see docs/style-guide.md §6.5) ──
     Headings and chrome links use foreground ink. Hover flips to primary
     as the affordance signal. Body-text anchors inside prose blocks can
     opt into primary via .link-primary if needed. */
  --bs-heading-color:   var(--foreground);
  --bs-link-color:      var(--foreground);
  --bs-link-color-rgb:  var(--bs-emphasis-color-rgb);

  /* ── Component active/hover/checked (Metronic hardcodes to #f7941d) ──
     These MUST stay --bs-primary per §6.5 (toggle on-state / selected). */
  --bs-component-active-bg:     var(--bs-primary);
  --bs-component-hover-color:   var(--bs-primary);
  --bs-component-active-color:  var(--bs-primary-inverse);
  --bs-component-checked-bg:    var(--bs-primary);
  --bs-component-checked-color: var(--bs-primary-inverse);

  /* ── Menu link colours (see §6.5) ──
     Text stays in the ink hierarchy. Hover flips to primary. Active state
     is communicated via a 2px primary border indicator (added via
     .menu-link.active rule below), not text colour. */
  --bs-menu-link-color-hover:   var(--bs-primary);
  --bs-menu-link-color-show:    var(--foreground);
  --bs-menu-link-color-here:    var(--foreground);
  --bs-menu-link-color-active:  var(--foreground);

  /* ── Misc UI elements (see §6.5) ──
     Scrolltop button is chrome, not a CTA — use neutral surface.
     Progress bar and ribbon default to foreground ink; semantic variants
     (success/warning/danger) are applied at the component level. */
  --bs-scrolltop-bg-color:       var(--secondary);
  --bs-scrolltop-bg-color-hover: var(--accent);
  --bs-progress-bar-bg:          var(--foreground);
  --bs-ribbon-label-bg:          var(--foreground);
  --bs-nav-pills-link-active-bg: var(--bs-primary);

  /* ── kt-* palette (badges & buttons reference these) ── */
  --kt-color-primary:     var(--bs-primary);
  --kt-color-success:     var(--bs-success);
  --kt-color-warning:     var(--bs-warning);
  --kt-color-danger:      var(--bs-danger);
  --kt-color-info:        var(--bs-info);
  --kt-color-muted:       var(--muted-foreground);
  --kt-color-green:       var(--bs-success-green);

  --kt-bg-primary:        color-mix(in oklab, var(--kt-color-primary) 15%, transparent);
  --kt-bg-success:        var(--bs-success-light);
  --kt-bg-warning:        var(--bs-warning-light);
  --kt-bg-danger:         var(--bs-danger-light);
  --kt-bg-info:           var(--bs-info-light);
  --kt-bg-muted:          var(--secondary, #f4f4f5);
  --kt-bg-green:          rgba(107, 211, 104, 0.15);

  --kt-border-primary:    color-mix(in oklab, var(--kt-color-primary) 30%, transparent);
  --kt-border-success:    rgba(var(--bs-success-rgb), 0.3);
  --kt-border-warning:    rgba(var(--bs-warning-rgb), 0.3);
  --kt-border-danger:     rgba(var(--bs-danger-rgb), 0.3);
  --kt-border-info:       rgba(var(--bs-info-rgb), 0.3);
  --kt-border-muted:      var(--border);
  --kt-border-green:      rgba(107, 211, 104, 0.3);

  --kt-solid-primary-fg:  var(--primary-foreground);
  --kt-solid-success-fg:  white;
  --kt-solid-warning-fg:  #000;
  --kt-solid-danger-fg:   var(--destructive-foreground, white);
  --kt-solid-info-fg:     white;
  --kt-solid-green-fg:    white;
}

/* ── Dark mode ── */
[data-bs-theme=dark] {
  /* Tint scale (dark mode — only the light stops flip to blend with dark surfaces.
     600-900 stay dark-mixed so buttons/toggles remain contrast-safe.) */
  --scale-50:  color-mix(in oklab, var(--theme-base) 12%, #1a1b22);
  --scale-100: color-mix(in oklab, var(--theme-base) 20%, #1a1b22);
  --scale-200: color-mix(in oklab, var(--theme-base) 32%, #1a1b22);
  --scale-300: color-mix(in oklab, var(--theme-base) 50%, #1a1b22);
  --scale-400: color-mix(in oklab, var(--theme-base) 75%, #1a1b22);

  /* Brand — derived from tint scale */
  --bs-primary:           var(--scale-500);
  --bs-primary-rgb:       247, 148, 29;
  --bs-primary-active:    var(--scale-600);
  --bs-primary-light:     var(--scale-50);
  --bs-primary-inverse:   #ffffff;

  /* Success (green) — vibrant mint-teal */
  --bs-success:           #28CB9B;
  --bs-success-rgb:       40, 203, 155;
  --bs-success-active:    #20b387;
  --bs-success-light:     #0f2a22;
  --bs-success-inverse:   #ffffff;

  /* Info */
  --bs-info:              #883FFF;
  --bs-info-rgb:          136, 63, 255;
  --bs-info-active:       #9E63FF;
  --bs-info-light:        #272134;
  --bs-info-inverse:      #ffffff;

  /* Warning (amber) */
  --bs-warning:           #D97706;
  --bs-warning-rgb:       217, 119, 6;
  --bs-warning-active:    #E5920A;
  --bs-warning-light:     #27200F;
  --bs-warning-inverse:   #ffffff;

  /* Danger */
  --bs-danger:            #E42855;
  --bs-danger-rgb:        228, 40, 85;
  --bs-danger-active:     #FF3767;
  --bs-danger-light:      #302024;
  --bs-danger-inverse:    #ffffff;

  /* Layout tokens — override Metronic/Tailwind defaults (dark mode).
     Muted values adopt --color-ink dark palette for better contrast. */
  --background:           #0F1014;
  --foreground:           #fafafa;
  --foreground-soft:      #d0d6e0;
  --card:                 #15171C;
  --card-foreground:      #fafafa;
  --popover:              #09090b;
  --popover-foreground:   #fafafa;
  --primary:              var(--bs-primary);
  --primary-foreground:   var(--bs-primary-inverse);
  --secondary:            #14151a;
  --secondary-foreground: #fafafa;
  --muted:                #18181b;
  --muted-foreground:     #8a8f98;
  --muted-foreground-faint: #62666d;
  --accent:               #18181b;
  --accent-foreground:    #fafafa;
  --destructive:          #dc2626;
  --destructive-foreground: #ffffff;
  --mono:                 #d4d4d8;
  --mono-foreground:      #000000;
  --border:               #27272a;
  --input:                #27272a;
  --ring:                 #52525b;

  /* Neutrals */
  --bs-dark:              #272A34;
  --bs-dark-rgb:          39, 42, 52;
  --bs-dark-light:        #1E2027;
  --bs-dark-inverse:      #ffffff;
  --bs-light:             #1B1C22;
  --bs-light-rgb:         27, 28, 34;
  --bs-secondary:         #363843;
  --bs-secondary-rgb:     54, 56, 67;

  /* Gray scale (inverted for dark) */
  --bs-gray-50:           #141416;
  --bs-gray-100:          #1B1B1F;
  --bs-gray-100-rgb:      27, 27, 31;
  --bs-gray-200:          #27272A;
  --bs-gray-200-rgb:      39, 39, 42;
  --bs-gray-300:          #3F3F46;
  --bs-gray-300-rgb:      63, 63, 70;
  --bs-gray-400:          #52525B;
  --bs-gray-400-rgb:      82, 82, 91;
  --bs-gray-500:          #71717A;
  --bs-gray-500-rgb:      113, 113, 122;
  --bs-gray-600:          #A1A1AA;
  --bs-gray-600-rgb:      161, 161, 170;
  --bs-gray-700:          #D4D4D8;
  --bs-gray-800:          #E4E4E7;
  --bs-gray-900:          #FAFAFA;
  --bs-gray-950:          #ffffff;

  /* Bootstrap utility tokens (dark) */
  --bs-white:             #ffffff;
  --bs-white-rgb:         255, 255, 255;
  --bs-border-color:      #26272F;
  --bs-page-bg:           #08090a;
  --bs-secondary-inverse: #ffffff;
  --bs-light-inverse:     #FAFAFA;
  --bs-text-white:        #ffffff;
  --bs-text-muted:        var(--bs-gray-500);

  /* Slate scale (darkened for dark mode) */
  --slate-50:             #1e1e22;
  --slate-100:            #252529;
  --slate-200:            #2e2e33;
  --slate-300:            #3f3f46;
  --slate-400:            #71717a;
  --slate-500:            #a1a1aa;
  --slate-600:            #b4b4bc;
  --slate-700:            #d4d4d8;
  --slate-800:            #e4e4e7;
  --slate-900:            #fafafa;

  /* ── Ink hierarchy — LEGACY aliases (dark mode, see §12 Phase 4) ── */
  --color-ink:            var(--foreground);
  --color-ink-light:      var(--foreground-soft);
  --color-ink-muted:      var(--muted-foreground);
  --color-ink-faint:      var(--muted-foreground-faint);
  --color-card:           var(--card);

  /* ── Shadows (dark mode — static shadows removed, hover kept for affordance) ── */
  --shadow-sm:            none;
  --shadow-md:            none;
  --shadow-lg:            none;
  --shadow-hover:         0 2px 8px rgba(255, 255, 255, 0.04);

  --bs-body-bg:             #08090a;
  --bs-body-bg-rgb:         8, 9, 10;

  /* ── Bootstrap text colour → ink hierarchy (dark mode) ── */
  --bs-body-color:          var(--color-ink-light);
  --bs-body-color-rgb:      208, 214, 224;
  --bs-secondary-color:     var(--color-ink-muted);
  --bs-secondary-color-rgb: 138, 143, 152;
  --bs-tertiary-color:      var(--color-ink-faint);
  --bs-tertiary-color-rgb:  98, 102, 109;
  --bs-emphasis-color:      var(--color-ink);
  --bs-emphasis-color-rgb:  247, 248, 248;

  /* ── Tailwind --primary bridge (dark mode) ── */
  --primary:            var(--bs-primary);

  /* ── Text utility overrides (dark mode) ── */
  --bs-text-primary:    var(--bs-primary);
  --bs-text-success:    var(--bs-success);
  --bs-text-info:       var(--bs-info);
  --bs-text-warning:    var(--bs-warning);
  --bs-text-danger:     var(--bs-danger);

  /* ── Heading / link colour (dark mode — see §6.5) ── */
  --bs-heading-color:   var(--foreground);
  --bs-link-color:      var(--foreground);
  --bs-link-color-rgb:  var(--bs-emphasis-color-rgb);

  /* ── Component active/hover/checked (dark mode — MUST stay primary per §6.5) ── */
  --bs-component-active-bg:     var(--bs-primary);
  --bs-component-hover-color:   var(--bs-primary);
  --bs-component-active-color:  var(--bs-primary-inverse);
  --bs-component-checked-bg:    var(--bs-primary);
  --bs-component-checked-color: var(--bs-primary-inverse);

  /* ── Menu link colours (dark mode — see §6.5) ── */
  --bs-menu-link-color-hover:   var(--bs-primary);
  --bs-menu-link-color-show:    var(--foreground);
  --bs-menu-link-color-here:    var(--foreground);
  --bs-menu-link-color-active:  var(--foreground);

  /* ── Misc UI elements (dark mode — see §6.5) ── */
  --bs-scrolltop-bg-color:       var(--secondary);
  --bs-scrolltop-bg-color-hover: var(--accent);
  --bs-progress-bar-bg:          var(--foreground);
  --bs-ribbon-label-bg:          var(--foreground);
  --bs-nav-pills-link-active-bg: var(--bs-primary);

  /* ── kt-* dark overrides ── */
  --kt-bg-primary:        color-mix(in oklab, var(--kt-color-primary) 20%, transparent);
  --kt-bg-muted:          rgba(255, 255, 255, 0.06);
  --kt-bg-green:          rgba(107, 211, 104, 0.12);
}

/* ── Tailwind .dark class — keep --primary in sync ── */
.dark {
  --primary: var(--bs-primary);
}

/* ═══════════════════════════════════════════════════════════════════════════
   Element-level overrides (Bootstrap hardcodes hex in rules, not variables)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Form checks / switches ── */
.form-switch .form-check-input:checked {
  background-color: var(--scale-600);
  border-color: var(--scale-600);
  --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3cdefs%3e%3cfilter id='s'%3e%3cfeDropShadow dx='0' dy='.5' stdDeviation='.6' flood-opacity='.35'/%3e%3c/filter%3e%3c/defs%3e%3ccircle r='3' fill='%23ffffff' filter='url(%23s)'/%3e%3c/svg%3e");
}
[data-bs-theme=light] .form-switch .form-check-input:checked {
  background-color: var(--scale-500);
  border-color: var(--scale-500);
}
.form-check-input:checked {
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
}
.form-check-input[type=checkbox]:indeterminate {
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
}
.form-check-input:focus {
  border-color: var(--bs-primary);
  box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25);
}

/* ── Solid primary buttons — use --primary-deep for a deeper, always-contrast-safe tone.
   Links, badges, and accents keep using --bs-primary (the 500 level). ── */

.btn-check:active + .btn.btn-primary,
.btn-check:checked + .btn.btn-primary,
.btn.btn-primary.active,
.btn.btn-primary.show,
.btn.btn-primary:active:not(.btn-active),
.btn.btn-primary:focus:not(.btn-active),
.btn.btn-primary:hover:not(.btn-active),
.show > .btn.btn-primary {
  background-color: var(--primary-deep-hover) !important;
  border-color: var(--primary-deep-hover);
}

/* ── Links (see docs/style-guide.md §6.5) ──
   Default anchors use foreground ink. Hover flips to primary as the
   affordance signal. Use .link-primary on a specific anchor (e.g. prose
   body text inside pricing fine print, blog copy) when you want primary
   as the resting colour. */
a {
  color: var(--bs-link-color);
  transition: color 0.15s ease;
}
a:hover {
  color: var(--bs-primary);
}
a.link-primary,
.link-primary {
  color: var(--bs-primary);
}
a.link-primary:hover,
.link-primary:hover {
  color: var(--bs-primary-active);
}

/* ── Active sidebar menu indicator (§6.5) ──
   Since --bs-menu-link-color-active is now foreground, the sidebar needs
   a dedicated indicator. A 2px primary bar on the left edge reads as
   "selected" without colouring the text. Scoped to .aside / .app-sidebar
   / #kt_aside so horizontal tabs, dropdown menus, and header menus keep
   whatever treatment Metronic (or their own stylesheet) applies. */
.aside .menu-link.active,
.aside .menu-link.here,
.app-sidebar .menu-link.active,
.app-sidebar .menu-link.here,
#kt_aside .menu-link.active,
#kt_aside .menu-link.here {
  position: relative;
}
.aside .menu-link.active::before,
.aside .menu-link.here::before,
.app-sidebar .menu-link.active::before,
.app-sidebar .menu-link.here::before,
#kt_aside .menu-link.active::before,
#kt_aside .menu-link.here::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 2px;
  height: 60%;
  background: var(--bs-primary);
  border-radius: 1px;
  pointer-events: none;
}

/* ── Font features (Inter alternate letterforms — ignored by other fonts) ── */
body {
  font-feature-settings: "cv01", "ss03";
  font-optical-sizing: auto;
}