/* ==========================================================================
   QUESTO HUB — GLOBAL MASTER THEME & PALETTE ENGINE (SINGLE SOURCE OF TRUTH)
   ==========================================================================
   HOW TO CHANGE THE ENTIRE WEBSITE PALETTE IN THE FUTURE:
   Simply edit the 4 hex codes below (--palette-1 through --palette-4).
   Every page, component, card, button, border, glow, gradient, modal,
   scrollbar, and text hierarchy across the entire web app derives
   automatically from these 4 variables!
   ========================================================================== */

:root {
    /* ======================================================================
       1. MASTER 4-COLOR PALETTE (Ultra-Premium Midnight Obsidian & Champagne Gold)
       Tailored for Medical, Clinical Simulation & Academic Prestige
       ====================================================================== */
    --palette-1: #0B0F17; /* 1. Deep Midnight Obsidian    — Main Background / Canvas (Priority 1) */
    --palette-2: #1E293B; /* 2. Architectural Slate Navy  — Cards / Elevated Surfaces / Borders (Priority 2) */
    --palette-3: #D4A853; /* 3. Royal Champagne Gold      — Primary Luxury Accent / CTAs / Prestige (Priority 3) */
    --palette-4: #F8FAFC; /* 4. Crisp Alabaster Platinum  — Primary Typography / Clean Foreground (Priority 4) */

    /* ======================================================================
       2. CORE SEMANTIC TOKENS (Automatically derived from --palette-1..4)
       ====================================================================== */

    /* --- Backgrounds & Surfaces --- */
    --t-bg:               var(--palette-1);
    --t-bg-deep:          color-mix(in srgb, var(--palette-1) 82%, #020408);
    --t-bg-alt:           color-mix(in srgb, var(--palette-1) 76%, var(--palette-2));
    --t-surface:          color-mix(in srgb, var(--palette-1) 52%, var(--palette-2));
    --t-surface-elevated: color-mix(in srgb, var(--palette-1) 30%, var(--palette-2));
    --t-surface-hover:    color-mix(in srgb, var(--palette-2) 88%, var(--palette-4));
    --t-surface-2:        var(--palette-2);
    --t-surface-card:     linear-gradient(145deg, var(--t-surface-elevated) 0%, var(--t-surface) 100%);
    --t-header-bg:        color-mix(in srgb, var(--palette-1) 90%, transparent);
    --t-glass-bg:         color-mix(in srgb, var(--t-surface) 84%, transparent);
    --t-glass-bg-hover:   color-mix(in srgb, var(--t-surface-elevated) 90%, transparent);
    --t-overlay-bg:       color-mix(in srgb, var(--palette-1) 86%, transparent);

    /* --- Borders & Dividers --- */
    --t-border:           color-mix(in srgb, var(--palette-2) 86%, var(--palette-4));
    --t-border-subtle:    color-mix(in srgb, var(--palette-1) 38%, var(--palette-2));
    --t-border-light:     color-mix(in srgb, var(--palette-2) 72%, var(--palette-4));
    --t-border-hover:     color-mix(in srgb, var(--palette-3) 52%, transparent);
    --t-border-gold:      color-mix(in srgb, var(--palette-3) 38%, transparent);
    --t-border-gold-sub:  color-mix(in srgb, var(--palette-3) 20%, transparent);
    --t-border-teal:      color-mix(in srgb, var(--t-teal) 35%, transparent);

    /* --- Primary Accent (Royal Champagne Gold — derived from --palette-3) --- */
    --t-accent:           var(--palette-3);
    --t-accent-light:     color-mix(in srgb, var(--palette-3) 68%, var(--palette-4));
    --t-accent-bright:    color-mix(in srgb, var(--palette-3) 58%, var(--palette-4));
    --t-accent-dark:      color-mix(in srgb, var(--palette-3) 82%, #1A1205);
    --t-accent-02:        color-mix(in srgb, var(--palette-3) 2%, transparent);
    --t-accent-03:        color-mix(in srgb, var(--palette-3) 3%, transparent);
    --t-accent-04:        color-mix(in srgb, var(--palette-3) 4%, transparent);
    --t-accent-05:        color-mix(in srgb, var(--palette-3) 5%, transparent);
    --t-accent-06:        color-mix(in srgb, var(--palette-3) 6%, transparent);
    --t-accent-07:        color-mix(in srgb, var(--palette-3) 7%, transparent);
    --t-accent-08:        color-mix(in srgb, var(--palette-3) 8%, transparent);
    --t-accent-09:        color-mix(in srgb, var(--palette-3) 9%, transparent);
    --t-accent-10:        color-mix(in srgb, var(--palette-3) 10%, transparent);
    --t-accent-12:        color-mix(in srgb, var(--palette-3) 12%, transparent);
    --t-accent-14:        color-mix(in srgb, var(--palette-3) 14%, transparent);
    --t-accent-15:        color-mix(in srgb, var(--palette-3) 15%, transparent);
    --t-accent-16:        color-mix(in srgb, var(--palette-3) 16%, transparent);
    --t-accent-18:        color-mix(in srgb, var(--palette-3) 18%, transparent);
    --t-accent-20:        color-mix(in srgb, var(--palette-3) 20%, transparent);
    --t-accent-22:        color-mix(in srgb, var(--palette-3) 22%, transparent);
    --t-accent-25:        color-mix(in srgb, var(--palette-3) 25%, transparent);
    --t-accent-26:        color-mix(in srgb, var(--palette-3) 26%, transparent);
    --t-accent-27:        color-mix(in srgb, var(--palette-3) 27%, transparent);
    --t-accent-28:        color-mix(in srgb, var(--palette-3) 28%, transparent);
    --t-accent-30:        color-mix(in srgb, var(--palette-3) 30%, transparent);
    --t-accent-32:        color-mix(in srgb, var(--palette-3) 32%, transparent);
    --t-accent-35:        color-mix(in srgb, var(--palette-3) 35%, transparent);
    --t-accent-40:        color-mix(in srgb, var(--palette-3) 40%, transparent);
    --t-accent-45:        color-mix(in srgb, var(--palette-3) 45%, transparent);
    --t-accent-50:        color-mix(in srgb, var(--palette-3) 50%, transparent);
    --t-accent-60:        color-mix(in srgb, var(--palette-3) 60%, transparent);
    --t-accent-75:        color-mix(in srgb, var(--palette-3) 75%, transparent);
    --t-gradient-accent:  linear-gradient(135deg, var(--t-accent) 0%, var(--t-accent-light) 100%);
    --t-gradient-sheen:   linear-gradient(135deg, var(--t-accent-dark) 0%, var(--t-accent) 45%, var(--t-accent-light) 100%);

    /* --- Secondary Clinical Accent (Biometric Teal-Cyan paired with Slate) --- */
    --t-secondary:        var(--palette-2);
    --t-teal:             color-mix(in srgb, #2DD4BF 82%, var(--palette-4));
    --t-teal-bright:      color-mix(in srgb, #2DD4BF 65%, var(--palette-4));
    --t-teal-05:          color-mix(in srgb, var(--t-teal) 6%, transparent);
    --t-teal-08:          color-mix(in srgb, var(--t-teal) 9%, transparent);
    --t-teal-10:          color-mix(in srgb, var(--t-teal) 12%, transparent);
    --t-teal-12:          color-mix(in srgb, var(--t-teal) 14%, transparent);
    --t-teal-14:          color-mix(in srgb, var(--t-teal) 16%, transparent);
    --t-teal-15:          color-mix(in srgb, var(--t-teal) 18%, transparent);
    --t-teal-18:          color-mix(in srgb, var(--t-teal) 22%, transparent);
    --t-teal-20:          color-mix(in srgb, var(--t-teal) 25%, transparent);
    --t-teal-25:          color-mix(in srgb, var(--t-teal) 30%, transparent);
    --t-teal-28:          color-mix(in srgb, var(--t-teal) 35%, transparent);
    --t-teal-35:          color-mix(in srgb, var(--t-teal) 45%, transparent);
    --t-teal-45:          color-mix(in srgb, var(--t-teal) 58%, transparent);

    /* --- Typography & Foreground Hierarchy (Crisp Alabaster & Cool Silver Slate) --- */
    --t-text:             var(--palette-4);
    --t-text-pure:        #FFFFFF;
    --t-text-secondary:   color-mix(in srgb, var(--palette-4) 82%, var(--palette-2));
    --t-text-muted:       color-mix(in srgb, var(--palette-4) 58%, var(--palette-2));
    --t-text-dim:         color-mix(in srgb, var(--palette-4) 40%, var(--palette-2));
    --t-on-accent:        var(--palette-1);

    /* --- Translucent Light Overlays (derived from --palette-4) --- */
    --t-light-02:         color-mix(in srgb, var(--palette-4) 2%, transparent);
    --t-light-03:         color-mix(in srgb, var(--palette-4) 3%, transparent);
    --t-light-04:         color-mix(in srgb, var(--palette-4) 4%, transparent);
    --t-light-05:         color-mix(in srgb, var(--palette-4) 5%, transparent);
    --t-light-06:         color-mix(in srgb, var(--palette-4) 6%, transparent);
    --t-light-07:         color-mix(in srgb, var(--palette-4) 7%, transparent);
    --t-light-08:         color-mix(in srgb, var(--palette-4) 8%, transparent);
    --t-light-10:         color-mix(in srgb, var(--palette-4) 10%, transparent);
    --t-light-12:         color-mix(in srgb, var(--palette-4) 12%, transparent);
    --t-light-14:         color-mix(in srgb, var(--palette-4) 14%, transparent);
    --t-light-15:         color-mix(in srgb, var(--palette-4) 15%, transparent);
    --t-light-18:         color-mix(in srgb, var(--palette-4) 18%, transparent);
    --t-light-20:         color-mix(in srgb, var(--palette-4) 20%, transparent);
    --t-light-25:         color-mix(in srgb, var(--palette-4) 25%, transparent);
    --t-light-30:         color-mix(in srgb, var(--palette-4) 30%, transparent);
    --t-light-35:         color-mix(in srgb, var(--palette-4) 35%, transparent);
    --t-light-45:         color-mix(in srgb, var(--palette-4) 45%, transparent);
    --t-light-50:         color-mix(in srgb, var(--palette-4) 50%, transparent);

    /* --- Semantic Status Tokens --- */
    --t-success:          #34D399;
    --t-success-08:       color-mix(in srgb, var(--t-success) 8%, transparent);
    --t-success-10:       color-mix(in srgb, var(--t-success) 10%, transparent);
    --t-success-12:       color-mix(in srgb, var(--t-success) 12%, transparent);
    --t-success-15:       color-mix(in srgb, var(--t-success) 15%, transparent);
    --t-success-28:       color-mix(in srgb, var(--t-success) 28%, transparent);
    --t-warning:          var(--t-accent);
    --t-warning-10:       var(--t-accent-10);
    --t-warning-12:       var(--t-accent-12);
    --t-warning-14:       var(--t-accent-14);
    --t-warning-28:       var(--t-accent-28);
    --t-danger:           #F87171;
    --t-danger-08:        color-mix(in srgb, var(--t-danger) 8%, transparent);
    --t-danger-10:        color-mix(in srgb, var(--t-danger) 10%, transparent);
    --t-danger-12:        color-mix(in srgb, var(--t-danger) 12%, transparent);
    --t-danger-14:        color-mix(in srgb, var(--t-danger) 14%, transparent);
    --t-danger-15:        color-mix(in srgb, var(--t-danger) 15%, transparent);
    --t-danger-28:        color-mix(in srgb, var(--t-danger) 28%, transparent);
    --t-danger-35:        color-mix(in srgb, var(--t-danger) 35%, transparent);
    --t-info:             var(--t-teal);

    /* --- Palette-Harmonized Shadow Engine (Deep Midnight Sapphire & Champagne Glow) --- */
    --t-shadow-base:       color-mix(in srgb, var(--palette-1) 65%, #020409);
    --t-shadow-ambient:    color-mix(in srgb, var(--t-shadow-base) 82%, var(--palette-2));
    --t-shadow-08:         color-mix(in srgb, var(--t-shadow-base) 10%, transparent);
    --t-shadow-10:         color-mix(in srgb, var(--t-shadow-base) 14%, transparent);
    --t-shadow-15:         color-mix(in srgb, var(--t-shadow-base) 20%, transparent);
    --t-shadow-20:         color-mix(in srgb, var(--t-shadow-base) 26%, transparent);
    --t-shadow-25:         color-mix(in srgb, var(--t-shadow-base) 32%, transparent);
    --t-shadow-30:         color-mix(in srgb, var(--t-shadow-base) 36%, transparent);
    --t-shadow-35:         color-mix(in srgb, var(--t-shadow-base) 42%, transparent);
    --t-shadow-40:         color-mix(in srgb, var(--t-shadow-base) 46%, transparent);
    --t-shadow-45:         color-mix(in srgb, var(--t-shadow-base) 50%, transparent);
    --t-shadow-50:         color-mix(in srgb, var(--t-shadow-ambient) 54%, transparent);
    --t-shadow-60:         color-mix(in srgb, var(--t-shadow-ambient) 60%, transparent);
    --t-shadow-70:         color-mix(in srgb, var(--t-shadow-ambient) 65%, transparent);
    --t-shadow-80:         color-mix(in srgb, var(--t-shadow-ambient) 70%, transparent);
    --t-shadow-85:         color-mix(in srgb, var(--t-shadow-ambient) 75%, transparent);

    /* --- Elevation & Glow Shadow Presets --- */
    --t-shadow-sm:         0 4px 14px -2px var(--t-shadow-35), 0 2px 6px -1px var(--t-shadow-20);
    --t-shadow-md:         0 10px 26px -4px var(--t-shadow-45), 0 4px 12px -2px var(--t-shadow-25);
    --t-shadow-lg:         0 20px 44px -6px var(--t-shadow-50), 0 8px 20px -4px var(--t-accent-12);
    --t-shadow-card:       0 14px 34px -4px var(--t-shadow-45), 0 6px 16px -2px var(--t-shadow-30), inset 0 1px 0 0 var(--t-light-05);
    --t-shadow-card-hover: 0 22px 46px -4px var(--t-shadow-60), 0 8px 22px -2px var(--t-accent-16), 0 0 24px -4px var(--t-accent-10);
    --t-shadow-btn:        0 6px 18px -2px var(--t-accent-28), 0 2px 8px -1px var(--t-shadow-30);
    --t-shadow-glow:       0 0 22px var(--t-accent-20), 0 0 8px var(--t-teal-15);
    --t-shadow-inset:      inset 0 2px 6px var(--t-shadow-40), inset 0 1px 0 var(--t-light-04);

    /* ======================================================================
       3. UNIFIED MODULE ALIASES (Maps all page-level CSS variables to Master)
       ====================================================================== */

    /* Base & Header Variables */
    --primary-dark:       var(--t-bg);
    --primary:            var(--t-surface);
    --secondary:          var(--t-border);
    --accent:             var(--t-accent);
    --accent-hover:       var(--t-accent-light);
    --accent-glow:        var(--t-accent-20);
    --gold:               var(--t-accent);
    --gold-light:         var(--t-accent-light);
    --gold-bright:        var(--t-accent-light);
    --gold-hover:         var(--t-accent-light);
    --gold-dark:          var(--t-accent-dark);
    --gold-dim:           var(--t-accent-12);
    --gold-glow:          var(--t-accent-15);
    --gold-border:        var(--t-accent-28);
    --gold-gradient:      var(--t-gradient-accent);

    --bg:                 var(--t-bg);
    --bg-alt:             var(--t-bg-alt);
    --bg-dark:            var(--t-bg);
    --bg-surface:         var(--t-bg-deep);
    --canvas:             var(--t-bg);
    --surface:            var(--t-surface);
    --surface-solid:      var(--t-surface);
    --surface-hover:      var(--t-surface-hover);
    --surface-inner:      var(--t-bg-deep);
    --card-bg:            var(--t-surface);
    --card-inner:         var(--t-bg-deep);
    --card-hover:         var(--t-surface-hover);
    --hover-bg:           var(--t-surface-hover);
    --search-bg:          var(--t-light-06);

    --border:             var(--t-border);
    --border-soft:        var(--t-border);
    --border-subtle:      var(--t-border-subtle);
    --border-hover:       var(--t-border-hover);
    --border-gold:        var(--t-border-gold);
    --border-teal:        var(--t-border-teal);

    --text-primary:       var(--t-text);
    --text-body:          var(--t-text-secondary);
    --text-secondary:     var(--t-text-secondary);
    --text-light:         var(--t-text);
    --text-muted:         var(--t-text-muted);
    --text-dim:           var(--t-text-dim);

    --teal:               var(--t-teal);
    --teal-bright:        var(--t-teal-bright);
    --teal-dim:           var(--t-teal-12);
    --teal-glow:          var(--t-teal-15);
    --teal-border:        var(--t-teal-28);

    --success:            var(--t-success);
    --warning:            var(--t-warning);
    --danger:             var(--t-danger);

    --gradient-primary:   var(--t-bg);
    --header-bg:          var(--t-header-bg);
    --header-border:      var(--t-border);
    --dropdown-bg:        var(--t-surface);
    --glow-accent:        var(--t-accent-25);

    /* Home & Medical Bot (--qh-*) */
    --qh-bg:              var(--t-bg);
    --qh-bg-alt:          var(--t-bg-alt);
    --qh-surface:         var(--t-surface);
    --qh-surface-solid:   var(--t-surface);
    --qh-surface-hover:   var(--t-surface-hover);
    --qh-surface-light:   var(--t-surface-2);
    --qh-surface-card:    var(--t-surface-card);
    --qh-border:          var(--t-border);
    --qh-border-subtle:   var(--t-border-subtle);
    --qh-border-hover:    var(--t-accent);
    --qh-border-gold:     var(--t-border-gold);
    --qh-border-gold-subtle: var(--t-border-gold-sub);
    --qh-border-teal:     var(--t-border-teal);
    --qh-text-pure:       var(--t-text-pure);
    --qh-text:            var(--t-text);
    --qh-text-bright:     var(--t-text);
    --qh-text-muted:      var(--t-text-muted);
    --qh-text-dim:        var(--t-text-dim);
    --qh-gold:            var(--t-accent);
    --qh-gold-light:      var(--t-accent-light);
    --qh-gold-dark:       var(--t-accent-dark);
    --qh-gold-hover:      var(--t-accent-light);
    --qh-gold-dim:        var(--t-accent-25);
    --qh-gold-soft:       var(--t-accent-12);
    --qh-gold-glow:       var(--t-accent-15);
    --qh-gold-sheen:      var(--t-gradient-sheen);
    --qh-gold-gradient:   var(--t-gradient-sheen);
    --qh-teal:            var(--t-teal);
    --qh-teal-bright:     var(--t-teal-bright);
    --qh-teal-soft:       var(--t-teal-12);

    /* Simulators & Clinical Cases (--sim-*) */
    --sim-bg:             var(--t-bg);
    --sim-surface:        var(--t-surface);
    --sim-surface-inner:  var(--t-bg-deep);
    --sim-surface-hover:  var(--t-surface-hover);
    --sim-border:         var(--t-border);
    --sim-border-gold:    var(--t-border-gold);
    --sim-gold:           var(--t-accent);
    --sim-gold-bright:    var(--t-accent-light);
    --sim-gold-glow:      var(--t-accent-15);
    --sim-teal:           var(--t-teal);
    --sim-teal-bright:    var(--t-teal-bright);
    --sim-teal-glow:      var(--t-teal-15);
    --sim-text-light:     var(--t-text);
    --sim-text-main:      var(--t-text-secondary);
    --sim-text-muted:     var(--t-text-muted);
    --sim-text-dim:       var(--t-text-dim);

    /* Drugs, OTC, Pregnancy Safety (--dh-*) */
    --dh-bg:              var(--t-bg);
    --dh-bg-alt:          var(--t-bg-deep);
    --dh-surface:         var(--t-surface);
    --dh-surface-hover:   var(--t-surface-hover);
    --dh-surface-solid:   var(--t-surface);
    --dh-surface-dark:    var(--t-bg-deep);
    --dh-card-bg:         var(--t-surface);
    --dh-border:          var(--t-border);
    --dh-border-hover:    var(--t-border-hover);
    --dh-border-active:   var(--t-accent);
    --dh-text:            var(--t-text);
    --dh-text-bright:     var(--t-text);
    --dh-text-muted:      var(--t-text-muted);
    --dh-text-dim:        var(--t-text-dim);
    --dh-accent:          var(--t-accent);
    --dh-accent-hover:    var(--t-accent-light);
    --dh-accent-glow:     var(--t-accent-12);
    --dh-accent-dim:      var(--t-accent-10);
    --dh-gold:            var(--t-accent);
    --dh-gold-glow:       var(--t-accent-14);
    --dh-gold-gradient:   var(--t-gradient-sheen);
    --dh-teal:            var(--t-teal);
    --dh-teal-glow:       var(--t-teal-12);

    /* Drug Index (--di-*) */
    --di-bg:              var(--t-bg);
    --di-surface:         var(--t-surface);
    --di-surface-elevated: var(--t-bg-deep);
    --di-surface-hover:   var(--t-surface-hover);
    --di-border:          var(--t-border);
    --di-border-light:    var(--t-border-light);
    --di-border-hover:    var(--t-border-hover);
    --di-gold:            var(--t-accent);
    --di-gold-light:      var(--t-accent-light);
    --di-gold-glow:       var(--t-accent-14);
    --di-gold-gradient:   var(--t-gradient-sheen);
    --di-text-main:       var(--t-text);
    --di-text-muted:      var(--t-text-muted);
    --di-text-dim:        var(--t-text-dim);

    /* Drug Recalls (--dr-*) */
    --dr-bg:              var(--t-bg);
    --dr-bg-alt:          var(--t-bg-deep);
    --dr-surface:         var(--t-surface);
    --dr-surface-solid:   var(--t-surface);
    --dr-surface-dark:    var(--t-bg-deep);
    --dr-surface-hover:   var(--t-surface-hover);
    --dr-border:          var(--t-border);
    --dr-border-hover:    var(--t-border-hover);
    --dr-text:            var(--t-text);
    --dr-text-muted:      var(--t-text-muted);
    --dr-text-dim:        var(--t-text-dim);
    --dr-accent:          var(--t-accent);
    --dr-accent-hover:    var(--t-accent-light);
    --dr-accent-glow:     var(--t-accent-12);
    --dr-gold:            var(--t-accent);
    --dr-gold-glow:       var(--t-accent-14);
    --dr-gold-gradient:   var(--t-gradient-sheen);
    --dr-teal:            var(--t-teal);
    --dr-teal-glow:       var(--t-teal-12);

    /* Diseases & Memory Palace (--dk-*) */
    --dk-bg:              var(--t-bg);
    --dk-surface:         var(--t-surface);
    --dk-surface-hover:   var(--t-surface-hover);
    --dk-surface-solid:   var(--t-surface);
    --dk-card-bg:         var(--t-surface);
    --dk-border:          var(--t-border);
    --dk-border-hover:    var(--t-border-hover);
    --dk-text:            var(--t-text);
    --dk-text-muted:      var(--t-text-muted);
    --dk-text-dim:        var(--t-text-dim);
    --dk-accent:          var(--t-accent);
    --dk-accent-hover:    var(--t-accent-light);
    --dk-accent-glow:     var(--t-accent-12);
    --dk-teal:            var(--t-teal);
    --dk-teal-glow:       var(--t-teal-12);
    --dk-gold:            var(--t-accent);
    --dk-gold-glow:       var(--t-accent-12);
    --dk-gold-gradient:   var(--t-gradient-sheen);

    /* Community (--c-*) */
    --c-bg:               var(--t-bg);
    --c-canvas:           var(--t-bg);
    --c-surface:          var(--t-surface);
    --c-surface-hover:    var(--t-surface-hover);
    --c-surface-solid:    var(--t-surface);
    --c-inner:            var(--t-bg-deep);
    --c-border:           var(--t-border);
    --c-border-hover:     var(--t-border-hover);
    --c-text:             var(--t-text);
    --c-text-muted:       var(--t-text-muted);
    --c-text-dim:         var(--t-text-dim);
    --c-accent:           var(--t-accent);
    --c-accent-hover:     var(--t-accent-light);
    --c-accent-glow:      var(--t-accent-12);
    --c-accent-border:    var(--t-accent-28);
    --c-gold-gradient:    var(--t-gradient-accent);

    /* Citation (--cit-*) */
    --cit-bg:             var(--t-bg);
    --cit-surface:        var(--t-surface);
    --cit-surface-inner:  var(--t-bg-deep);
    --cit-surface-hover:  var(--t-surface-hover);
    --cit-border:         var(--t-border);
    --cit-border-hover:   var(--t-border-hover);
    --cit-text:           var(--t-text);
    --cit-text-secondary: var(--t-text-secondary);
    --cit-text-muted:     var(--t-text-muted);
    --cit-text-dim:       var(--t-text-dim);
    --cit-gold:           var(--t-accent);
    --cit-gold-bright:    var(--t-accent-light);
    --cit-gold-dim:       var(--t-accent-10);
    --cit-gold-border:    var(--t-accent-28);
    --cit-gold-glow:      var(--t-accent-14);
    --cit-teal:           var(--t-teal);
    --cit-teal-bright:    var(--t-teal-bright);
    --cit-teal-dim:       var(--t-teal-10);
    --cit-teal-border:    var(--t-teal-28);
    --cit-teal-glow:      var(--t-teal-14);

    /* Contact (--contact-*) */
    --contact-bg:             var(--t-bg);
    --contact-surface:        var(--t-surface);
    --contact-surface-hover:  var(--t-surface-hover);
    --contact-border:         var(--t-border);
    --contact-border-focus:   var(--t-border-hover);
    --contact-accent:         var(--t-accent);
    --contact-accent-gradient: var(--t-gradient-accent);
    --contact-text-primary:   var(--t-text);
    --contact-text-secondary: var(--t-text-secondary);
    --contact-text-muted:     var(--t-text-muted);

    /* Courses (--course-*) */
    --course-primary:       var(--t-accent);
    --course-primary-light: var(--t-accent-12);
    --course-accent:        var(--t-accent-light);
    --course-gold:          var(--t-accent);
    --course-surface:       var(--t-surface);
    --course-border:        var(--t-border);

    /* Donations (--don-*) */
    --don-canvas:         var(--t-bg);
    --don-surface:        var(--t-surface);
    --don-surface-hover:  var(--t-surface-hover);
    --don-inner:          var(--t-bg-deep);
    --don-border:         var(--t-border);
    --don-border-hover:   var(--t-border-hover);
    --don-gold:           var(--t-accent);
    --don-gold-light:     var(--t-accent-light);
    --don-gold-grad:      var(--t-gradient-accent);
    --don-gold-dim:       var(--t-accent-12);
    --don-gold-border:    var(--t-accent-28);
    --don-gold-glow:      var(--t-accent-18);
    --don-text:           var(--t-text);
    --don-text-sec:       var(--t-text-secondary);
    --don-text-muted:     var(--t-text-muted);
    --don-text-dim:       var(--t-text-dim);

    /* English Test (--eng-*) */
    --eng-primary:        var(--t-surface);
    --eng-secondary:      var(--t-accent);
    --eng-accent:         var(--t-accent);
    --eng-accent-hover:   var(--t-accent-light);
    --eng-accent-glow:    var(--t-accent-18);
    --eng-bg:             var(--t-bg);
    --eng-card:           var(--t-surface);
    --eng-card-elevated:  var(--t-bg-deep);
    --eng-surface-hover:  var(--t-surface-hover);
    --eng-border:         var(--t-border);
    --eng-border-subtle:  var(--t-light-06);
    --eng-glass:          var(--t-glass-bg);
    --eng-glass-border:   var(--t-border);
    --eng-text:           var(--t-text);
    --eng-text-secondary: var(--t-text-secondary);
    --eng-muted:          var(--t-text-muted);
    --eng-dim:            var(--t-text-dim);
    --eng-gold:           var(--t-accent);
    --eng-gold-bright:    var(--t-accent-light);
    --eng-gold-dim:       var(--t-accent-12);
    --eng-gold-border:    var(--t-accent-28);
    --eng-gradient-accent: var(--t-gradient-accent);
    --eng-gradient-gold:  var(--t-gradient-accent);

    /* Insights (--ins-*) */
    --ins-bg:             var(--t-bg);
    --ins-surface:        var(--t-surface);
    --ins-surface-solid:  var(--t-surface);
    --ins-surface-inner:  var(--t-bg-deep);
    --ins-surface-hover:  var(--t-surface-hover);
    --ins-border:         var(--t-border);
    --ins-border-hover:   var(--t-border-hover);
    --ins-border-gold:    var(--t-border-gold);
    --ins-border-teal:    var(--t-border-teal);
    --ins-text:           var(--t-text);
    --ins-text-secondary: var(--t-text-secondary);
    --ins-text-muted:     var(--t-text-muted);
    --ins-text-dim:       var(--t-text-dim);
    --ins-gold:           var(--t-accent);
    --ins-gold-bright:    var(--t-accent-light);
    --ins-gold-dim:       var(--t-accent-10);
    --ins-gold-border:    var(--t-accent-28);
    --ins-gold-glow:      var(--t-accent-12);
    --ins-teal:           var(--t-teal);
    --ins-teal-bright:    var(--t-teal-bright);
    --ins-teal-dim:       var(--t-teal-10);
    --ins-teal-border:    var(--t-teal-28);
    --ins-teal-glow:      var(--t-teal-12);

    /* Legal (--legal-*) */
    --legal-bg:             var(--t-bg);
    --legal-surface:        var(--t-surface);
    --legal-surface-inner:  var(--t-bg-deep);
    --legal-surface-hover:  var(--t-surface-hover);
    --legal-border:         var(--t-border);
    --legal-border-hover:   var(--t-border-hover);
    --legal-gold:           var(--t-accent);
    --legal-gold-light:     var(--t-accent-light);
    --legal-gold-glow:      var(--t-accent-12);
    --legal-gold-border:    var(--t-accent-28);
    --legal-text:           var(--t-text);
    --legal-text-secondary: var(--t-text-secondary);
    --legal-text-muted:     var(--t-text-muted);
    --legal-text-dim:       var(--t-text-dim);

    /* Opportunities (--opp-*) */
    --opp-main:            var(--t-bg);
    --opp-bg:              var(--t-bg);
    --opp-bg-alt:          var(--t-bg-deep);
    --opp-card:            var(--t-surface);
    --opp-card-solid:      var(--t-surface);
    --opp-surface:         var(--t-surface);
    --opp-surface-dark:    var(--t-bg-deep);
    --opp-surface-hover:   var(--t-surface-hover);
    --opp-border:          var(--t-border);
    --opp-border-hover:    var(--t-border-hover);
    --opp-accent:          var(--t-accent);
    --opp-accent-gradient: linear-gradient(135deg, var(--t-accent-18) 0%, var(--t-accent-08) 100%);
    --opp-accent-hover:    linear-gradient(135deg, var(--t-accent-28) 0%, var(--t-accent-15) 100%);
    --opp-accent-glow:     var(--t-accent-12);
    --opp-text-title:      var(--t-text);
    --opp-text-body:       var(--t-text-secondary);
    --opp-text-muted:      var(--t-text-muted);
    --opp-text-dim:        var(--t-text-dim);
    --opp-gold:            var(--t-accent);
    --opp-gold-glow:       var(--t-accent-14);
    --opp-teal:            var(--t-teal);
    --opp-teal-glow:       var(--t-teal-12);

    /* Pharmacies (--ph-*) */
    --ph-canvas:          var(--t-bg);
    --ph-surface:         var(--t-surface);
    --ph-inner:           var(--t-bg-deep);
    --ph-border:          var(--t-border);
    --ph-border-hover:    var(--t-border-hover);
    --ph-gold:            var(--t-accent);
    --ph-gold-light:      var(--t-accent-light);
    --ph-gold-grad:       var(--t-gradient-accent);
    --ph-gold-dim:        var(--t-accent-12);
    --ph-gold-border:     var(--t-accent-28);
    --ph-text:            var(--t-text);
    --ph-text-sec:        var(--t-text-secondary);
    --ph-text-muted:      var(--t-text-muted);
    --ph-text-dim:        var(--t-text-dim);

    /* Scholarships & Essay Planner (--sch-*, --pln-*) */
    --sch-bg:             var(--t-bg);
    --sch-surface:        var(--t-surface);
    --sch-surface-inner:  var(--t-bg-deep);
    --sch-surface-hover:  var(--t-surface-hover);
    --sch-border:         var(--t-border);
    --sch-border-hover:   var(--t-border-hover);
    --sch-text:           var(--t-text);
    --sch-text-secondary: var(--t-text-secondary);
    --sch-text-muted:     var(--t-text-muted);
    --sch-text-dim:       var(--t-text-dim);
    --sch-gold:           var(--t-accent);
    --sch-gold-bright:    var(--t-accent-light);
    --sch-gold-dim:       var(--t-accent-10);
    --sch-gold-border:    var(--t-accent-28);
    --sch-gold-glow:      var(--t-accent-14);
    --sch-teal:           var(--t-teal);
    --sch-teal-bright:    var(--t-teal-bright);
    --sch-teal-dim:       var(--t-teal-10);
    --sch-teal-border:    var(--t-teal-28);
    --sch-teal-glow:      var(--t-teal-14);

    --pln-bg:             var(--t-bg);
    --pln-surface:        var(--t-surface);
    --pln-surface-inner:  var(--t-bg-deep);
    --pln-surface-hover:  var(--t-surface-hover);
    --pln-border:         var(--t-border);
    --pln-border-hover:   var(--t-border-hover);
    --pln-text:           var(--t-text);
    --pln-text-secondary: var(--t-text-secondary);
    --pln-text-muted:     var(--t-text-muted);
    --pln-text-dim:       var(--t-text-dim);
    --pln-gold:           var(--t-accent);
    --pln-gold-bright:    var(--t-accent-light);
    --pln-gold-dim:       var(--t-accent-12);
    --pln-gold-border:    var(--t-accent-32);
    --pln-gold-glow:      var(--t-accent-18);

    /* STEM (--stem-*) */
    --stem-main:          var(--t-bg);
    --stem-card:          var(--t-surface);
    --stem-border:        var(--t-border);
    --stem-accent:        var(--t-accent);
    --stem-accent-glow:   var(--t-accent-12);
    --stem-text-title:    var(--t-text);
    --stem-text-body:     var(--t-text-secondary);
    --stem-gold:          var(--t-accent-light);

    /* Public Profile (--v-*) */
    --v-bg:               var(--t-bg);
    --v-surface-solid:    var(--t-surface);
    --v-accent:           var(--t-accent);
    --v-border:           var(--t-border);
    --v-text:             var(--t-text);
    --v-text-secondary:   var(--t-text-secondary);
    --v-text-muted:       var(--t-text-muted);
    --v-text-dim:         var(--t-text-dim);

    /* Global & Module Shadow Aliases */
    --shadow-sm:          var(--t-shadow-sm);
    --shadow-md:          var(--t-shadow-md);
    --shadow-lg:          var(--t-shadow-lg);
    --shadow-card:        var(--t-shadow-card);
    --shadow-card-hover:  var(--t-shadow-card-hover);
    --card-shadow:        var(--t-shadow-card);
    --card-shadow-hover:  var(--t-shadow-card-hover);
    --qh-shadow-card:       var(--t-shadow-card);
    --qh-shadow-card-hover: var(--t-shadow-card-hover);
    --qh-shadow-sm:         var(--t-shadow-sm);
    --sim-shadow-card:      var(--t-shadow-card);
    --sim-shadow-hover:     var(--t-shadow-card-hover);
    --sim-shadow-btn:       var(--t-shadow-btn);
    --dh-shadow-card:       var(--t-shadow-card);
    --dh-shadow-card-hover: var(--t-shadow-card-hover);
    --dh-shadow-sm:         var(--t-shadow-sm);
    --di-shadow-card:       var(--t-shadow-card);
    --di-shadow-card-hover: var(--t-shadow-card-hover);
    --di-shadow-sm:         var(--t-shadow-sm);
    --dr-shadow-card:       var(--t-shadow-card);
    --dr-shadow-card-hover: var(--t-shadow-card-hover);
    --dr-shadow-sm:         var(--t-shadow-sm);
    --dk-shadow-card:       var(--t-shadow-card);
    --dk-shadow-card-hover: var(--t-shadow-card-hover);
    --dk-shadow-sm:         var(--t-shadow-sm);
    --cit-shadow-card:      var(--t-shadow-card);
    --pln-shadow-card:      var(--t-shadow-card);
    --sch-shadow-card:      var(--t-shadow-card);
    --don-shadow-sm:        var(--t-shadow-sm);
    --don-shadow-md:        var(--t-shadow-md);
    --don-shadow-lg:        var(--t-shadow-lg);
    --eng-shadow-lg:        var(--t-shadow-lg);
    --eng-shadow-glow:      var(--t-shadow-glow);
}

/* ==========================================================================
   4. GLOBAL BASE CANVAS, SCROLLBAR & SELECTION RULES
   ========================================================================== */
html, body {
    background-color: var(--t-bg) !important;
    background: var(--t-bg) !important;
    color: var(--t-text);
    -webkit-tap-highlight-color: transparent;
    scrollbar-width: thin;
    scrollbar-color: var(--t-border) var(--t-bg);
}

::selection {
    background: var(--t-accent-30);
    color: var(--t-text-pure);
}

::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: var(--t-bg);
}

::-webkit-scrollbar-thumb {
    background: var(--t-border);
    border-radius: 4px;
    transition: background 0.2s ease;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--t-accent);
}

::-webkit-scrollbar-corner {
    background: var(--t-bg);
}

.turbo-progress-bar {
    background: var(--t-gradient-accent) !important;
}

/* Global Utility Helpers */
.text-gold { color: var(--t-accent) !important; }
.text-teal { color: var(--t-teal) !important; }
.text-pure { color: var(--t-text-pure) !important; }
.text-muted { color: var(--t-text-muted) !important; }