body {
    margin: 0;
    font-family: 'Lexend', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
      'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  
  
  code {
    font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
      monospace;
  }
  
  
  :root{
    --clr159db5: #159db5; /* Dark mode: heading clr | button border-clr (excpetion:CTA button has no border clr)| Link text color*/
    /* --clr212A37: #212A37; */
    --clr212A37: #212a37; /* Dark mode: card & accordion background-clr | Input & Slect field background color*/
    --clr0e131B: #0e131b; /* Dark mode: page background color | */
    --clr1d5a6d: #1d5a6d; /* Dark mode: */ /* Light mode: Heading Color*/
    --clrfd4556: #fd4556; /* Dark mode: Logo color | Login & account button background clr*/
    --clrf7fcfe: #f7fcfe; /* Dark mode: hovered button text & border color | cancel button text color | not used for cancel button border color | Link Hover text color | Input & Slect field text color | Input & Slect field active border color | text color*/
    --clr0d313f: #0d313f; /* Dark mode: Call to Action Button hover text color | Login & account button hover text color */
    
    
    /* light mode */
    --clrd3f7fa: #d3f7fa;
    --clr22bbd7: #22bbd7;
  
    /* cancel button clr */
    /* --cancel-red: #ff5c5c; */
    --cancel-red: #dd6262; /* Dark mode: cancel button background color | red used to indicate loss*/
    --cancel-red-hvr: #a10623; /* Dark mode: cancel button hover background color */
    --checkmark-green: #28a745; /* dark & light mode: checkmark green | green to use to idnicate a Win  */
  
    --grey: #7a7a7a; /* Dark mode: comming soon greyed out | agent name listings in VideoList */
  
    /* temp */
    --star-filled:    #FFD700;
    --star-empty:     #555555;
    --star-team-avg:  #50FA7B;
  
    --color-role-manager:   #0b5fff;
    --color-role-analyst:   #7a5cff;
    --color-role-coach:     #00b37e;
    --color-role-player:    #C68500;
    --color-role-sub:       #FF7E33;
    --color-role-trial:     #DB61A2;
    --color-role-spectator: #9aa0a6;
  }
  
  /* topbar d3f7fa
  topbar team anme 159db5
  call toa ction --clr212A37: #212A37;
  
  sidebar 159
  line sidbar #22bbd7
  
  heading 1 159
  heading 2 0e131*/
  
  :root {
  
    --golden-yellow: #F7B500;
    --pastel-orange: #ffcf8d;
  
    --CTA-btn-primary-clr-dark: #FF8403;
    --CTA-btn-primary-hvr-clr-dark:  #CC6A02;
    --CTA-btn-primary-hvr-clr-dark2:  #FF9833;
    --CTA-btn-primary-hvr-clr-dark3:  #FF6A00;
    --CTA-btn-primary-txt-clr-dark:  #000000;
    --Bg-clr-dark: #141414;
    --Primary-clr-dark: #036BFF;
    --Secondary-clr-dark: #338DFF;
    --White-txt-clr: #FFFFFF;
    --Red-txt-clr: #ff6961;
    --Macro-primary-txt-clr-dark: #E0E6F3;
    --Macro-primary-heading-clr-dark: #338DFF;
    --Macro-primary-title-clr-dark: #FF9B38;
    --Page-bg-clr-dark: #04070f; /* #1A1F2A */
    
  
    /* === Light theme palette === */
    --General-Page-text-strong-light: #1a3b5d;
    --General-Page-text-subtle-light: #004466;
    --General-Page-accent-light:      #004a99;
    --General-Page-number-light:      #007acc;
  
    /* === Dark theme palette === */
    --General-Page-text-strong-dark: #e2e8f0;
    --General-Page-text-subtle-dark: #cbd5e1;
    --General-Page-accent-dark: #93c5fd;
    --General-Page-number-dark: #60a5fa;
   
    --ImageHoverEffect-tooltip-bg-color-dark: #2C3E50;
  
    --General-accordion-scrollbar-track-clr: #0f1115; /* track */
    --General-accordion-scrollbar-thumb-clr: #2b6cb0; /* thumb */
    --General-accordion-scrollbar-thumb-hover-clr: #3b82f6; /* thumb hover */
    
    
    /* General-Page.css */
      --General-Page-fs-title-xl: 1.75rem;
      --General-Page-fs-title-lg: 1.5rem;
      --General-Page-fs-title-md: 1.25rem;
      --General-Page-fs-text-base: 1rem;
      --General-Page-fs-label: 1.125rem;
  
      --General-Page-space-xxs: 0.25rem;
      --General-Page-space-xs: 0.5rem;
      --General-Page-space-sm: 0.75rem;
      --General-Page-space-md: 1rem;
      --General-Page-space-lg: 1.5rem;
  
      --General-Page-num-list-gutter: 1.75rem;
      --General-Page-num-list-gap: 0.25rem;
  
    
    /* Image/ Media Selector */
    --container-test-width: 21rem;
    --content-gap: 1rem;
    --border-radius: 8px;
    --image-border-radius: 00.5rem;
    --image-max-width: 100%;
    --image-max-height: 600px;
    --text-font-size: 1rem;
    --text-line-height: 1.5;
    --button-padding: 0.5rem 1rem;
    --button-font-size: 1rem;
    --button-radius: 0.5rem;
    --button-border-width: 2px;
    --button-transition: 0.3s ease;
  
    --image-zoom-level: 1.5; /* default zoom */
    
    --dark0: #000102;
    --white0: #fff;
    --offwhite: #e4e7ec;
    --dark1: #141414;
    --blue0: #287ad8;
    --lightblue0: #48adf0; /*#8f99fb periwinkle*/
    --dark2: #181822;
    --grey0: #353a35;
    --turkois0: #6da4a8;
    --blue1: #5b8bc2;
    --dark3: #374151;
    --dark4: #485367;
    --grey1: rgba(228, 231, 236, 0.5);
    --orange0:#ffbb52; 
    --orange1: #ffeccf;
    --green: green;
    --shadow-blue: #287ad8;
    --shadow-red: #ff4b5c;
    --purple-blue: #1e1e2e;
    --desaturated-light-blue: #b4cfff;
    --desaturated-light-blue-light: #c8dbff;
    --soft-pastle-blue: #d0ecff;
    --deep-navy-blue: #1a3b5d;
    
    /* --cancel-red: #B00020; */
    --soft-teal: #4C9A8C;
    --bright-yellow: #ffcc00;
    --deep-navy-blue: #2c3e50;
    --bold-blue: #004a99;
    --light-grey: #f0f0f0;
  
  /* Hero section */
  
  
    /* Hero Scroller */
    --clr-neutral-100: hsl(0, 0%, 100%);
    --clr-primary-100: hsl(205, 15%, 58%);
    --clr-primary-400: hsl(215, 25%, 27%);
    --clr-primary-800: hsl(217, 33%, 17%);
    --clr-primary-900: hsl(218, 33%, 9%);
  
  
  /* Sidebar */
    --box-shadow-grey:rgba(228, 231, 236, 0.5);
    --lightgreen: lightgreen;
    --darkgreen: #256d13fb;
    --clr: #3ceec188;
    /* --grey: #000000d2; */
    --green: #afffc2bb;
  
    /* light‐theme */
    --color-light-bg:            #ffffff;
    --color-light-secondary-bg:  #f4f4f4;
    --color-light-primary:       rgba(0, 0, 0, 0.3);
    /* dark‐theme */
    --color-dark-bg:             #1e1e1e;
    --color-dark-secondary-bg:   #2e2e2e;
    --color-dark-primary:        rgba(255, 255, 255, 0.5);
  
  /* Highlights */
  --white3: #e0e0e0;
  --letter-box-text-color: #000;
  --letter-box-border-color: #ccc;
  
  
  /* Dark Theme Base Tokens */
  --dark-bg1: #000102;   /* page background */
  --dark-bg2: #141414;   /* nav/sidebar background */
  --dark-bg3: #181822;   /* secondary dark background */
  --dark-bg4: #1a1a1a;   /* modal background */
  --dark-bg5: #2c3e50;   /* soft navy button bg */
  
  --dark-text1: #ffffff;     /* main white */
  --dark-text2: #e0e0e0;     /* softer white text */
  --dark-accent1: #287ad8;   /* blue0 core brand */
  --dark-accent2: #48adf0;   /* hover blue */
  --dark-accent3: #ffbb52;   /* orange */
  --dark-accent4: #c473ff;   /* violet spinner */
  --dark-accent5: #ffdd57;   /* yellow spinner */
  
  --dark-purple: #1e1e2e;    /* card front */
  --dark-shadow: #287ad8;
  --dark-box-shadow: rgba(0, 0, 0, 0.35);
  --dark-border: #5b8bc2;
  --dark-grey1: #374151;
  --dark-grey2: #485367;
  
  --pastel-purple: #8c6bc27e;
  --purple-border: #8c6bc2;
  
  
  /* Light Theme Base Palette */
  --light-bg1: #e8f4fc; /* Soft light blue */
  --light-bg2: #cce7ff; /* Lighter for navs/cards */
  --light-bg3: #f5f8fe; /* Card front */
  --light-bg4: #ffffff; /* Card back */
  
  --light-text1: #1a3b5d; /* Deep navy */
  --light-text2: #004466; /* Darker link/nav text */
  --light-accent1: #004a99; /* Bold blue */
  --light-accent2: #007acc; /* Bright blue */
  --light-accent3: #85c8ff; /* Hover */
  --light-accent4: #f7b500; /* Gold accent */
  --light-border: #004a99;
  --light-box-bg: #f0f0f0;
  --light-box-shadow: rgba(0, 74, 153, 0.25);
  
  /* Sub-section shared constants */
  --sub-card-discount-color1: #f7b500;
  --sub-card-discount-color2: #ffc94d;
  --sub-card-discount-color3: #ffdd57;
  
  --sub-section-leave-hover-bg: #ff4b5c;
  --sub-section-ban-hover-bg: #e6a800;
  
  
  --sidebar-blue-accent: #5b8bc2;  /* sidebar highlight + icon */
  --sidebar-hover-blue: #48adf0;
  --sidebar-deep-blue: #1a3b5d;
  --sidebar-light-grey: #d6e4f0;
  --sidebar-hover-grey: #e0e0e0;
  --sidebar-submenu-blue: #b4cfff;
  --sidebar-green: #3ceec1;
  --sidebar-green-shadow: rgba(60, 238, 193, 0.3);
  --sidebar-purple: #8c6bc2;
  
  
  --accordion-box-shadow-light1: rgba(0, 0, 0, 0.15);
  --accordion-box-shadow-light2: rgba(255, 255, 255, 0.7);
  --accordion-box-shadow-dark1: rgba(0, 0, 0, 0.3);
  --accordion-box-shadow-dark2: rgba(255, 255, 255, 0.05);
  
  --general-dark-bg: #0e0e12;
  --general-dark-content: #dce3f0;
  --general-dark-accordion-bg: #1a1d24;
  --general-dark-accordion-content: #c8dbff;
  --general-dark-title: #ffbb52;
  --general-dark-border: #5b8bc2;
  --general-dark-bold: #c8dbff;
  --general-dark-sublabel: #F7B500;
  --general-dark-accordion-main: #1e1e2e;
  
  --general-light-bg: #f4f8fc;
  --general-light-content: #1a3b5d;
  --general-light-accordion-bg: #ffffff;
  --general-light-accordion-content: #2c3e50;
  --general-light-title: #004a99;
  --general-light-border: #004a99;
  --general-light-bold: #004a99;
  --general-light-sublabel: #004a99;
  --general-light-accordion-main: #d0ecff;
  
  
  --dark-selector-active-bg: #3b82f6;    /* vibrant readable blue */
  --dark-selector-active-border: #60a5fa; /* softer light blue border */
  --dark-selector-bg: #1f2937;           /* dark slate gray background */
  --dark-selector-border: #374151;       /* dark gray border */
  --dark-selector-text: #f9fafb;         /* near-white for readability */
  
  --light-selector-active-bg: #dbeafe;   /* soft blue */
  --light-selector-active-border: #3b82f6; /* strong blue border */
  --light-selector-bg: #f1f5f9;          /* light slate background */
  --light-selector-border: #cbd5e1;      /* soft gray border */
  --light-selector-text: #1e3a8a;        /* deep readable blue */
  
  --indiv-page-soft-blue: #eaf4ff;
  --indiv-page-muted-shadow: rgba(0, 74, 153, 0.15);
  --indiv-page-vibrant-blue: #004a99;
  --indiv-page-muted-blue: #3b82f6;
  --indiv-page-hover-blue: #60a5fa;
  --indiv-page-grey-text: #444444;
  --indiv-page-light-yellow: #fffbe6;
  --indiv-page-deep-blue: #1e3a8a;
  --indiv-page-light-grey: #f0f4f8;
  --indiv-page-warning-red: #b00020;
  --indiv-page-warning-red-hover: #e53935;
  
  --note-soft-yellow: #fffbe6;
  --note-soft-grey: #dbe7f0;
  --note-rich-navy: #1e3a8a;
  --note-light-text: #444444;
  --note-muted-grey: #9ca3af;
  --note-deep-red: #b00020;
  --note-hover-red: #e53935;
  --note-toolbar-dark-bg: #2a2d3a;
  --note-toolbar-dark-border: #485367;
  --note-toolbar-dark-btn: #374151;
  --note-toolbar-dark-hover: #485367;
  --note-toolbar-dark-active: #3b82f6;
  --note-toolbar-dark-active-border: #60a5fa;
  --note-token-mention: #f7b500;
  --note-token-hashtag: #48adf0;
  --note-add-light-bg: #004a99;
  --note-add-light-hover: #3b82f6;
  --note-add-dark-bg: #287ad8;
  --note-add-dark-hover: #48adf0;
  --note-placeholder-grey-light: #888888;
  --note-placeholder-grey-dark: #aaaaaa;
  --soft-edit-blue: #d9e9ff;        
  --edit-hover-blue: #c2ddfc;     
  --edit-border-blue: #99c1f1;      
  --edit-highlight-blue: #b4d9ff;   
  
  --cancel-bg-grey: #cccccc;        
  --cancel-hvr-grey: #bbbbbb;      
  --cancel-text-dark: #222222;      
  --cancel-text-light: #444444;    
  
  
    /* tooltip colors */
    --color-tooltip-bg:             rgba(0, 0, 0, 0.85);
    --color-tooltip-hover-bg:       rgba(49, 49, 49, 0.95);
    --color-tooltip-text:           #ffffff;
  
  
  
    --footer-dark-bg: #141414;        
    --footer-light-bg: #eaf4ff;     
    --footer-dark-text: #ffffff;      
    --footer-light-text: #1a3b5d;     
    --footer-accent: #287ad8;      
    --footer-hover: #48adf0;               
    --footer-link: #5b8bc2;                  
  
    /* TeamPage */
    --color-light-border:        #cccccc;
    --color-light-surface-hover: #f0f0f0;
    --color-dark-border:         #4d4d4d;
    --color-dark-surface-hover:  #333333;
  
  
    /* Sub section scroller */
    /* light palette for disabled select */
    --Sub-section-palette-light-select-disabled-bg:      #f3f4f6;  /* light gray */
    --Sub-section-palette-light-select-disabled-border:  #d1d5db;  /* gray-300 */
    --Sub-section-palette-light-select-disabled-text:    #6b7280;  /* gray-500 */
  
    /* dark palette for disabled select (tuned for readability on dark UI) */
    --Sub-section-palette-dark-select-disabled-bg:       #1f2937;  /* slate-800 */
    --Sub-section-palette-dark-select-disabled-border:   #374151;  /* gray-700 */
    --Sub-section-palette-dark-select-disabled-text:     #9ca3af;  /* gray-400 */
  
    /* shared shadow color (box-shadow uses rgb by your rule) */
    --Sub-section-palette-select-disabled-bs-clr:        rgb(0 0 0 / 0.12);
  
    /* CTA colors */
    --cta-bg:      #ff8403;
    --cta-text:    #000000;
    --cta-hover:   #f7b500;
  
    
  
  }
  
  .dark {
  
    /* Footer */
    /* --footer__logo__color: var(--dark-text1);
    --footer__link__items__h2: var(--dark-accent1);
    --footer__link__items__a: var(--blue1);
    --footer__link__items__hover: var(--dark-accent2);
    --social__icon__link__color: var(--dark-text1);
    --social__media__bar__text__color: var(--dark-text1); */
  
  
    /* Auth Buttons */
    --Login__Page__Main__Button: var(--green);
    --Signup__Page__Main__Button: var(--dark-accent3);
    --Hero__page__index__subchapter__hover__clr: red;
  
    /* Hero Section */
    --Hero-Book-bg-clr: var(--dark-bg1);
    
    --Why-Us-Section-bg-clr: #181b20;
    --card-bg-clr: var(--dark-purple);
    --card-back-bg-clr: var(--dark-bg3);
  
    --Why-Us-Section-clr: var(--dark-text1);
    --Why-Us-Section-title-clr: var(--dark-accent3);
    --card-clr: var(--dark-text1);
    --card-back-clr: var(--desaturated-light-blue);
    --Why-Us-Section-card-guide-h2-clr: var(--dark-accent3);
    --Why-Us-Section-card-guide-p-clr: var(--dark-text2);
  
    --card-shadow-blue: var(--dark-shadow);
    --Why-Us-Section-card-shadow: var(--card-shadow-blue);
  
    --spinner-colors: #287ad8, #c473ff, #f7b500, #287ad8;
  
    --Why-Us-Section-scroller-bg-clr: var(--clr-primary-800);
    --Why-Us-Section-scroller-title: var(--dark-text1);
    --Why-Us-Section-small-box-bg-clr: var(--clr-primary-400);
    --Why-Us-Section-small-box-clr: var(--dark-text1);
    --Why-Us-Section-small-box-box-shadow: var(--clr-primary-900);
    --Why-Us-Section-big-box-bg-clr: var(--dark-bg3);
    --Why-Us-Section-big-box-border-clr: var(--dark-accent2);
  
  
    /* Sub-section */
    --sub-card-bg-clr: var(--clr212A37);
    --sub-section-bg-clr: var(--clr212A37);
    --sub-card-content-bg-clr: var(--clr0e131B);
    --sub-card-content-clr: var(--clrf7fcfe);
    --sub-section-sub--btn-clr: var(--clrf7fcfe);
    --sub-section-leave-btn-clr: var(--clrf7fcfe);
    --sub-section-leave-btn-bg-clr: var(--cancel-red-hvr);
    --sub-section-leave-btn-border-clr: none;
    --sub-section-leave-btn-bg-clr-hvr: var(--cancel-red);
    --sub-section-leave-btn-clr-hvr: var(--clrf7fcfe);
    --sub-section-kick-team-btn-clr: var(--clr159db5);
    --sub-section-ban-input-border-clr: var(--clr159db5);
    --sub-section-ban-input-border-bg-clr: var(--clr0e131B);
    --sub-section-ban-button-bg-clr: var(--clr159db5);
    --sub-section-ban-button-bg-clr-hvr: var(--clrf7fcfe);
    --sub-section-ban-button-text-clr: var(--clrf7fcfe);
    --sub-section-ban-button-text-clr-hvr: var(--clr159db5);
    --sub-section-select-border-clr: var(--clr159db5);
    --sub-section-select-bg-clr: var(--clr212A37);
    --sub-section-select-border-clr-focus: var(--clrf7fcfe);
    --sub-section-select-option-bg-clr: var(--clr0e131B);
    --sub-section-select-option-clr: var(--clrf7fcfe);
    --sub-section-select-after-clr: var(--clrf7fcfe);
    --Sub-section-custom-select-wrapper-bg-clr:     var(--clr0e131B);
    --Sub-section-custom-select-wrapper-border-clr: var(--clr159db5);
    --Sub-section-custom-select-wrapper-clr:        var(--clrf7fcfe);
    --Sub-section-custom-select-wrapper-bs-clr:     var(--clr0d313f);
    --sub-collapsible-btn-bg: var(--clr159db5);
    --sub-collapsible-btn-bg-hvr: var(--clrf7fcfe);
    --sub-collapsible-btn-text: var(--clrf7fcfe);
    --sub-collapsible-btn-text-hvr: var(--clr0d313f);
  
    /* === Generate Invite Link button === */
    --team-form-btn-bg: var(--clr159db5);
    --team-form-btn-bg-hvr: var(--clrf7fcfe);
    --team-form-btn-text: var(--clrf7fcfe);
    --team-form-btn-text-hvr: var(--clr159db5);
  
  
  /*  */
    --subsec-role-manager-bg-clr:   var(--color-role-manager);
    --subsec-role-manager-clr:      var(--White-txt-clr);
    --subsec-role-analyst-bg-clr:   var(--color-role-analyst);
    --subsec-role-analyst-clr:      var(--White-txt-clr);
    --subsec-role-coach-bg-clr:     var(--color-role-coach);
    --subsec-role-coach-clr:        #0b0b0b;
    --subsec-role-player-bg-clr:    var(--color-role-player);
    --subsec-role-player-clr:       #0b0b0b;
    --subsec-role-sub-bg-clr:       var(--color-role-sub);
    --subsec-role-sub-clr:          #0b0b0b;
    --subsec-role-spectator-bg-clr: var(--color-role-spectator);
    --subsec-role-spectator-clr:    #0b0b0b;
    --subsec-role-menu-bg-clr:      var(--Page-bg-clr-dark);
    --subsec-role-menu-clr:         var(--White-txt-clr);
    --subsec-role-menu-border-clr:  var(--General-Page-text-subtle-dark);
    --subsec-role-menu-hover-bg-clr: var(--ImageHoverEffect-tooltip-bg-color-dark);
    --subsec-role-menu-hover-clr:   var(--White-txt-clr);
    --subsec-role-badge-focus-border-clr: var(--color-role-player);
    --subsec-role-badge-bs-clr: rgb(0, 0, 0, 0.15);
    --subsec-role-menu-bs-clr:  rgb(0, 0, 0, 0.25);
  
    --team-form-bg: var(--sub-card-content-bg-clr);
    --team-form-text: var(--sub-card-content-clr);
    --team-form-heading: var(--Title-clr);
  
    --team-form-border: none;
    --team-form-shadow: var(--sub-collapsible-shadow);
  
    --team-form-input-bg: var(--sub-section-select-bg-clr);
    --team-form-input-border: var(--sub-section-select-border-clr);
    --team-form-input-border-focus: var(--clrf7fcfe);
    --team-form-input-text: var(--sub-collapsible-input-text);
  
    /* Primary Create Team button – use the same red family as the rest of the menus */
    --team-form-btn-bg: var(--cancel-red);
    --team-form-btn-bg-hvr: var(--sub-section-leave-hover-bg);
    --team-form-btn-text: var(--clrf7fcfe);
    --team-form-btn-text-hvr: var(--cancel-red);  
  
  
  
    /* Modal */
    --modal-overlay-bg: rgba(0, 0, 0, 0.6);
    --modal-bg: var(--dark-bg4);
    --modal-close-btn-color: var(--dark-text1);
    --movement-guide-btn-bg: var(--dark-bg5);
    --movement-guide-btn-text: var(--light-grey);
    --movement-guide-btn-hover-bg: var(--blue1);
  
    /* Highlights */
    --highlight-box-bg-color: #2a2d3a;
    --letter-box-bg-color: var(--dark-grey1);
    --letter-box-text-color: var(--dark-text1);
    --letter-box-border-color: var(--dark-border);
    --highlight-box-shadow: var(--dark-box-shadow);
  
    --highlight-box-bg-color: #222831;
    --highlight-box-text-color: #f1f1f1;
    --highlight-box-border-color: #444;
    --highlight-box-shadow: 0 4px 10px rgb(0 0 0 / 0.4);
    --highlight-box-button-bg: #ff6b6b;
    --highlight-box-button-text: #fff;
    --tooltip-bg-color: #2c3e50;
    --tooltip-text-color: #ffffff;
  
    /* Comments */
    --comment-icon-border-color: var(--dark-text1);
  
  
    /* Images */
    --image-border-color: var(--blue1);
  
  
    /* Map */
    --Map__Approach__BadComps__SubLabels: var(--golden-yellow);
  
  
    /* Sidebar */
    --sidebar-bg-clr: var(--dark-bg2);
    --sidebar-clr: var(--dark-border);
    --sidebar-logo-clr: var(--dark-accent1);
    --sidebar-ul-active-a: var(--dark-accent2);
    --sidebar-ul-active-i: var(--dark-accent1);
    --sidebar-i-clr: var(--dark-accent1);
    --sidebar-a-span-clr: var(--White-txt-clr);
    --sidebar-a-span-hvr-clr: var(--Secondary-clr-dark);
    --sidebar-a-hvr-clr: var(--dark-accent2);
    --toggle-btn-hvr-clr: var(--dark-grey1);
    --sidebar-book-tgl-border-clr: var(--dark-accent1);
    --sidebar-book-tgl-border-bg-clr: var(--dark-bg3);
    --sidebar-book-tgl-border-box-shadow-clr: var(--box-shadow-grey);
    --sidebar-sub-menu-clr: var(--dark-text2);
    --sidebar-book-toggle-bg-clr: var(--sidebar-purple);
    --sidebar-book-toggle-box-shadow-clr: var(--sidebar-purple);
    --sidebar-tgl-checkbox-box-shadow-clr: var(--dark-accent3);
    --sidebar-tgl-checkbox-bg-clr: var(--dark-accent3);
    --sidebar-sub-menu-a-hvr: var(--dark-accent1);
    --Sidebar-mention-notification-clr:  var(--white0);
    --Sidebar-mention-notification-bg-clr: var(--note-hover-red);
  
    --next-event-time-login-reminder-clr: var(--Red-txt-clr);
  
    --Sidebar-sidebar-bg-clr:               var(--Bg-clr-dark);
    --Sidebar-scrollbar-track-bg-clr:       var(--color-dark-secondary-bg);
    --Sidebar-scrollbar-thumb-bg-clr:       var(--Secondary-clr-dark);
    --Sidebar-scrollbar-thumb-border-clr:   var(--color-dark-bg);
  
    --tooltip-bg: #2c3e50;
    --tooltip-text: #ffffff; 
  
    /* Calendar */
    --calendar-source-selector--clr:var(--CTA-btn-primary-clr-dark);
  
    /* NextCalendarEvent */
    --Sidebar-Next-Event-next-event-note-bg-clr:        var(--color-tooltip-bg);
    --Sidebar-Next-Event-next-event-note-hover-bg-clr:  var(--color-tooltip-hover-bg);
    --Sidebar-Next-Event-next-event-note-clr:           var(--color-tooltip-text);
    --sidebar-next-event-hover-bg-clr: var(--indiv-page-light-grey);
    --sidebar-next-event-active-bg-clr: var(--CTA-btn-primary-clr-dark);
  
  
    /* Topbar */
    --Top__bar__main__text__color: var(--Primary-clr-dark);
    /* --Top__bar__second__text__color: var(--dark-text1); */
    --Top__bar__main__hover__color: var(--Secondary-clr-dark);
    --Top__bar__Login__hover__background__color: var(--dark-accent2);
    --Top__bar__Login__hover__color: var(--dark-accent1);
    --main__bar__colors: var(--Bg-clr-dark);
  
    --topbar-logo-primary-color: var(--Secondary-clr-dark);
    --topbar-logo-secondary-color: var(--Primary-clr-dark);
    --topbar-logo-tertiary-color: var(--CTA-btn-primary-clr-dark);
    
  
    /* Zoom Slider */
    --zoom__slider__track__color: var(--dark-accent2);
    --zoom__slider__thumb__color: var(--dark-accent3);
    --zoom__slider__thumb__hover__shadow: rgba(255, 187, 82, 0.6);
  
    /* Theme Selector */
    --theme__selector__button__toggle__slot__border__color: var(--offwhite);
    --theme__selector__button__toggle__slot__background__color: var(--dark-grey1);
    --theme__selector__button__toggle__slot__box__shadow: var(--white0);
    --theme__selector__button__toggle__button__background__color: var(--dark-grey2);
    --theme__selector__checked__background__color: var(--white0);
    --theme__selector__checked__toggle__button__box__shadow__color: var(--dark-accent3);
    --theme__selector__checked__toggle__button__box__shadow__background__color: var(--orange1);
  
    /* Mobile */
    --mobile__Top__bar__menu__background__color: var(--dark-bg3);
    --mobile__Top__bar__toggle__bar: var(--dark-accent1);
  
  
    /* General Page css */
    --General-page-bg-clr: var(--Page-bg-clr-dark);
    --General-page-clr: var(--general-dark-content);
    --General-Page-Main-content-container-transition: 0.3s ease-in-out;
    --sidebar-width: 15rem;
    --General-page-accordion-bg-clr: var(--general-dark-accordion-bg);
    --General-page-accordion__content__clr: var(--Macro-primary-txt-clr-dark);
    --Main-page-Title-clr: var(--Macro-primary-title-clr-dark);
    --General-page-image-border-clr: var(--general-dark-border);
    --General-page-accordion-bold-clr: var(--general-dark-bold);
    --Map__Approach__BadComps__SubLabels-clr: var(--general-dark-sublabel);
    --General-page-accordion--clr: var(--general-dark-accordion-main);
    --General-Page-accordion-box-shadow-clr1: var(--accordion-box-shadow-dark1);
    --General-Page-accordion-box-shadow-clr2: var(--accordion-box-shadow-dark2);
    --General-Page-accordion-box-shadow-clr3: var(--accordion-box-shadow-dark1);
    --General-Page-accordion-box-shadow-clr4: var(--accordion-box-shadow-dark2);
    --General-page-accordion-label-bg-clr: var(--Macro-primary-heading-clr-dark);
  
    --General-Page-heading-xl-clr: var(--General-Page-text-strong-dark);
    --General-Page-heading-lg-clr: var(--General-Page-text-subtle-dark);
    --General-Page-heading-md-clr: var(--General-Page-text-subtle-dark);
    --General-Page-h-label-clr: var(--General-Page-accent-dark);
    --General-Page-num-list-clr: var(--General-Page-number-dark);
    /* Strat Video Custom Colours */
    --General-Page-lv-minimal-controls-bg-clr:     var(--Bg-clr-dark);
    --General-Page-lv-minimal-controls-border-clr: var(--General-Page-Video-Pause-neutral-border-dark);
    --General-Page-lv-minimal-controls-bs-clr:     var(--General-Page-Video-Pause-shadow-rgba-dark);
    /* Play/Pause button text/icon */
    --General-Page-lv-pp-btn-clr:                  var(--White-txt-clr);
    /* Focus ring color for .lv-pp-btn:focus-visible */
    --General-Page-lv-pp-btn-focus-clr:            var(--Primary-clr-dark);
    --General-Page-Video-Pause-neutral-border-dark: #2f2f33;
    --General-Page-Video-Pause-shadow-rgba-dark:    rgb(0 0 0 / 0.35);
  
    /* Image / Media */
    --image-selector-active-bg: var(--dark-accent1);
    --image-selector-active-border: var(--dark-bg5);
    --image-selector-border: var(--dark-grey2);
    --image-selector-bg: var(--dark-grey1);
  
    --ImageHoverEffect-tooltip-bg: var(--ImageHoverEffect-tooltip-bg-color-dark);
    --ImageHoverEffect-tooltip-text: var(--White-txt-clr);
    --ImageHoverEffect-tooltip-accent: var(--CTA-btn-primary-clr-dark);
  
    /* Individual & Team Page */
    --Indiv-Page-bg-clr: var(--dark-bg3);
    --Indiv-Page-box-shadow-clr: rgba(0, 0, 0, 0.35);
    --Indiv-Page-section-h2-clr: var(--dark-accent1);
    --Indiv-Page-highlight-item-bg-clr: var(--dark-bg5);
    --Indiv-Page-highlight-text-clr: var(--white0);
    --Indiv-Page-highlight-location-clr: var(--dark-text2);
    --Indiv-Page-highlight-link-clr: var(--dark-accent1);
    --Indiv-Page-highlight-link-hvr-clr: var(--dark-accent2);
    --Indiv-Page-section-box-p-clr: var(--dark-text2);
    --Indiv-Page-favorite-item-bg-clr: var(--dark-grey1);
    --Indiv-Page-favorite-location-clr: var(--dark-text2);
    --Indiv-Page-favorite-link-clr: var(--dark-accent1);
    --Indiv-Page-favorite-link-hvr-clr: var(--dark-accent2);
    --Indiv-Page-highlight-delete-bg-clr: var(--cancel-red);
    --Indiv-Page-highlight-delete-clr: var(--white0);
    --Indiv-Page-highlight-delete-hvr-clr: var(--sub-section-leave-hover-bg);
    --Indiv-AND-Team-Page-login-btn-bg-clr: var(--dark-accent1);
    --Indiv-AND-Team-Page-login-btn-clr: var(--white0);
    --Indiv-AND-Team-Page-login-btn-bg-hvr-clr: var(--dark-accent2);
    --Indiv-AND-Team-Page-login-prompt-text-clr: var(--dark-text1);
    --Indiv-AND-Team-Page-highlight-text-clr: rgb(0, 7, 66);
    
    --Indiv-Page-notes-textarea-border-clr: var(--dark-border);
    --Indiv-Page-notes-bg-clr: var(--dark-bg5);
    --Indiv-Page-notes-text-clr: var(--dark-text1);
    --Indiv-Page-note-save-msg-clr: var(--dark-accent1);
    --Indiv-Page-note-item-bg-clr: var(--dark-grey1);
    --Indiv-Page-note-text-clr: var(--dark-text1);
    --Indiv-Page-note-timestamp-clr: var(--dark-text2);
    --Indiv-Page-note-char-count-clr: var(--dark-text2);
    --Indiv-Page-note-delete-bg-clr: var(--note-deep-red);
    --Indiv-Page-note-delete-clr: var(--white0);
    --Indiv-Page-highlight-delete-hvr-clr: var(--note-hover-red);
    --Indiv-Page-notes-border-clr: var(--dark-border);
  
    --note-toolbar-bg: var(--note-toolbar-dark-bg);
    --note-toolbar-border: var(--note-toolbar-dark-border);
    --note-toolbar-btn-bg: var(--note-toolbar-dark-btn);
    --note-toolbar-btn-clr: var(--dark-text1);
    --note-toolbar-btn-hover-bg: var(--note-toolbar-dark-hover);
    --note-toolbar-select-bg: var(--note-toolbar-dark-btn);
    --note-toolbar-active-bg: var(--note-toolbar-dark-active);
    --note-toolbar-active-border: var(--note-toolbar-dark-active-border);
    --Indiv-Page-note-add-bg-clr: var(--note-add-dark-bg);
    --Indiv-Page-note-add-clr: var(--white0);
    --Indiv-Page-note-add-hvr-clr: var(--note-add-dark-hover);
    --Indiv-Page-notes-placeholder-clr: var(--note-placeholder-grey-dark);
    --Indiv-Page-note-edit-bg-clr: #2d3f56;
    --Indiv-Page-note-edit-clr: #d9e9ff;
    --Indiv-Page-note-edit-hvr-clr: #3c5472;
    --Indiv-Page-note-edit-border: #66aaff;
    --Indiv-Page-note-edit-highlight: #1e2e44;
    --Indiv-Page-note-cancel-bg-clr: #442222;
    --Indiv-Page-note-cancel-clr: #ffcccc;
    --Indiv-Page-note-cancel-hvr-clr: #663333;
  
    --note-hashtag-color: var(--note-token-hashtag);
    --note-mention-color: var(--note-token-mention);
    
  
    --note-mention-color: #aac9ff;
    --note-mention-highlight-color: var(--note-token-mention);
    --note-mention-highlight-bg: none;
  
    --TeamPage-mention-dropdown-bg-clr:            var(--color-dark-bg);
    --TeamPage-mention-dropdown-border-clr:        var(--color-dark-border);
    --TeamPage-mention-dropdown-item-hover-bg-clr: var(--color-dark-surface-hover);
    
    --TeamPage-badge-user-bg-clr:   #e0f7fa;
    --TeamPage-badge-user-clr:     #006064;
    --TeamPage-badge-team-bg-clr:  #f1f8e9;
    --TeamPage-badge-team-clr:     #33691e;
    --TeamPage-badge-both-bg-clr:  #f3e5f5;
    --TeamPage-badge-both-clr:     #4a148c;
  
  
  
    /* Footer */
    --footer-container-bg-clr: var(--clr212A37);
    --footer-logo-clr: var(--clr159db5);
    --footer-link-items-h2-clr: var(--clr159db5);
    --footer-link-items-a-clr: var(--clr159db5);
    --footer-social-icon-link-clr: var(--clr159db5);
    --footer-social-media-clr: var(--clr159db5);
    --footer-link-items-a-hvr-clr: var(--clrf7fcfe);
    --footer-social-icon-link-hvr-clr: var(--clrf7fcfe);
    --footer-social-media-bg-clr: var(--clr212A37);
  
    --footer-website-rights-clr: var(--clrf7fcfe);
  
  /* Custom Alert */
    --alert__success__bg: #eaf4ff !important;           /* soft light blue */
    --alert__success__text: #004a99 !important;         /* bold navy blue */
  
    --alert__error__bg: #fff4e5 !important;             /* soft pastel yellow */
    --alert__error__text: #7a4f01 !important;           /* warm brown/orange */
  
    --alert__info__bg: #f0f4f8 !important;              /* neutral light grey-blue */
    --alert__info__text: #1a3b5d !important;            /* deep readable navy */
  
    --alert__border__radius: 0.5rem !important;
    --alert__padding: 1rem !important;
  }
  
  
  .light {
  
    /* Footer */
    /* --footer__logo__color: #000000;
    --footer__link__items__h2: var(--light-accent2);
    --footer__link__items__a: var(--light-accent1);
    --footer__link__items__hover: var(--light-accent2);
    --social__icon__link__color: #000000;
    --social__media__bar__text__color: #000000; */
  
    /* Theme Selector */
    --theme__selector__button__toggle__slot__border__color: var(--offwhite);
    --theme__selector__button__toggle__slot__background__color: var(--dark3);
    --theme__selector__button__toggle__slot__box__shadow: var(--grey1);
    --theme__selector__button__toggle__button__background__color: var(--dark4);
    --theme__selector__button__toggle__slot__box__shadow: var(--white0);
    --theme__selector__checked__background__color: var(--white0);
    --theme__selector__checked__toggle__button__box__shadow__color: var(--orange0);
    --theme__selector__checked__toggle__button__box__shadow__background__color: var(--orange1);
  
    /* Auth Buttons */
    --Login__Page__Main__Button: var(--green);
    --Signup__Page__Main__Button: var(--orange0);
  
    /* Hero Section */
    --Hero-Book-bg-clr: var(--light-bg1);
  
    --Why-Us-Section-bg-clr: #f4f5fa;
    --card-bg-clr: var(--light-bg3);
    --card-back-bg-clr: var(--light-bg4);
  
    --Why-Us-Section-clr: var(--light-text1);
    --Why-Us-Section-title-clr: var(--light-accent1);
    --card-clr: var(--light-text1);
    --card-back-clr: var(--blue0);
    --Why-Us-Section-card-guide-h2-clr: var(--light-accent1);
    --Why-Us-Section-card-guide-p-clr: var(--dark3);
  
    --card-shadow-blue: var(--light-box-shadow);
    --Why-Us-Section-card-shadow: var(--card-shadow-blue);
  
    --spinner-colors: #85c8ff, #d6a7ff, #ffe680, #85c8ff;
  
    --Why-Us-Section-scroller-bg-clr: var(--light-bg2);
    --Why-Us-Section-small-box-clr: var(--light-accent1);
    --Why-Us-Section-scroller-title: var(--light-text1);
    --Why-Us-Section-small-box-bg-clr: var(--soft-pastle-blue);
    --Why-Us-Section-small-box-box-shadow: var(--light-box-shadow);
    --Why-Us-Section-big-box-bg-clr: var(--soft-pastle-blue);
    --Why-Us-Section-big-box-clr: var(--light-accent1);
    --Why-Us-Section-big-box-border-clr: var(--blue0);
  
    
    /* Sub-Section */
    --sub-section-bg-clr: #eceef5;
    --sub-header-clr: var(--Title-clr);
  
    --sub-card-bg-clr: var(--card-back-bg-clr);
    --sub-card-content-bg-clr: var(--card-back-bg-clr);
  
    --sub-card-content-clr: var(--page__text__color);
    --sub-card-BulletPoint-clr: var(--light-accent1);
  
    --sub-card-discount-bg-clr: rgba(0, 0, 0, 0.05);
    --sub-card-discount-clr: var(--homepage-accent);
    --sub-card-discount-text-clr: var(--page__text__color);
    --sub-card-discount-text-clr-strong: var(--homepage-accent);
  
    --sub-card-team-price-clr: var(--homepage-accent);
    --sub-card-team--price-text-clr: var(--light-text2);
  
    --sub-card-discount-clr1: var(--sub-card-discount-color1);
    --sub-card-discount-clr2: var(--sub-card-discount-color2);
    --sub-card-discount-clr3: var(--sub-card-discount-color3);
  
    --sub-card-container-glow: var(--homepage-accent);
    --sub-card-container-glow--before: var(--light-accent2);
  
    --sub-card-clr1: var(--light-accent1);
    --sub-card-clr2: var(--light-accent2);
  
    --sub-section-sub--btn-clr: var(--white0);
  
    --sub-section-leave-btn-clr: var(--white0);
    --sub-section-leave-btn-bg-clr: var(--cancel-red);
    --sub-section-leave-btn-border-clr: var(--cancel-red);
    --sub-section-leave-btn-bg-clr-hvr: var(--cancel-red);
    --sub-section-leave-btn-clr-hvr: var(--white0);
  
    --sub-section-kick-team-btn-clr: var(--sub-section-leave-hover-bg);
  
    --sub-section-ban-input-border-clr: var(--homepage-accent);
    --sub-section-ban-input-border-bg-clr: var(--light-bg2);
    --sub-section-ban-button-bg-clr: var(--homepage-accent);
    --sub-section-ban-button-bg-clr-hvr: var(--sub-section-ban-hover-bg);
  
    --sub-section-select-border-clr: var(--light-accent1);
    --sub-section-select-bg-clr: var(--light-bg2); 
    --sub-section-select-border-clr-focus: var(--sub-card-discount-color2); 
    --sub-section-select-option-bg-clr: var(--light-bg4);
    --sub-section-select-option-clr: var(--light-text1);  
    --sub-section-select-after-clr: var(--light-accent1); 
  
    --Sub-section-custom-select-wrapper-bg-clr:     var(--Sub-section-palette-light-select-disabled-bg);
    --Sub-section-custom-select-wrapper-border-clr: var(--Sub-section-palette-light-select-disabled-border);
    --Sub-section-custom-select-wrapper-clr:        var(--Sub-section-palette-light-select-disabled-text);
    --Sub-section-custom-select-wrapper-bs-clr:     var(--Sub-section-palette-select-disabled-bs-clr);
  
    --subsec-role-manager-bg-clr:   var(--color-role-manager);
    --subsec-role-manager-clr:      var(--White-txt-clr);
    --subsec-role-analyst-bg-clr:   var(--color-role-analyst);
    --subsec-role-analyst-clr:      var(--White-txt-clr);
    --subsec-role-coach-bg-clr:     var(--color-role-coach);
    --subsec-role-coach-clr:        #0b0b0b;
    --subsec-role-player-bg-clr:    var(--color-role-player);
    --subsec-role-player-clr:       #0b0b0b;
    --subsec-role-sub-bg-clr:       var(--color-role-sub);
    --subsec-role-sub-clr:          #0b0b0b;
    --subsec-role-spectator-bg-clr: var(--color-role-spectator);
    --subsec-role-spectator-clr:    #0b0b0b;
    --subsec-role-menu-bg-clr:      var(--Page-bg-clr-dark);
    --subsec-role-menu-clr:         var(--White-txt-clr);
    --subsec-role-menu-border-clr:  var(--General-Page-text-subtle-dark);
    --subsec-role-menu-hover-bg-clr: var(--ImageHoverEffect-tooltip-bg-color-dark);
    --subsec-role-menu-hover-clr:   var(--White-txt-clr);
    --subsec-role-badge-focus-border-clr: var(--color-role-player);
    --subsec-role-badge-bs-clr: rgb(0, 0, 0, 0.15);
    --subsec-role-menu-bs-clr:  rgb(0, 0, 0, 0.25);
  
    --team-form-bg: var(--card-back-bg-clr);
    --team-form-text: var(--page__text__color);
    --team-form-heading: var(--Title-clr);
    --team-form-input-bg: var(--light-bg2);
    --team-form-input-border: var(--light-accent1);
    --team-form-input-border-focus: var(--sub-card-discount-color2);
    --team-form-btn-bg: var(--dark-accent1);
    --team-form-btn-bg-hvr: var(--sub-section-ban-hover-bg);
    --team-form-btn-text: var(--white0);
  
  
  
  
    /* Modal */
    --modal-overlay-bg: rgba(0, 0, 0, 0.3);
    --modal-bg: var(--white0);
    --modal-close-btn-color: var(--light-text1);
    --movement-guide-btn-bg: var(--light-bg1);
    --movement-guide-btn-text: var(--light-text1);
    --movement-guide-btn-hover-bg: var(--light-bg2);
  
    /* Highlights */
    --highlight-box-bg-color: var(--white0);
    --letter-box-bg-color: var(--light-box-bg);
    --letter-box-text-color: var(--light-text1);
    --letter-box-border-color: var(--light-border);
  
    --highlight-box-bg-color: #ffffff;
    --highlight-box-text-color: #111111;
    --highlight-box-border-color: #cccccc;
    --highlight-box-shadow: 0 4px 10px rgb(0 0 0 / 0.1);
    --highlight-box-button-bg: #e74c3c;
    --highlight-box-button-text: #ffffff;
    --tooltip-bg-color: #f0f0f0;
    --tooltip-text-color: #1a3b5d;
  
    /* Map */
    --Map__Approach__BadComps__SubLabels: var(--cancel-red);
  
    /* Sidebar */
    --base-clr: var(--soft-pastle-blue);
    --line-clr: var(--light-accent2);
    --hover-clr: var(--light-accent3);
    --mobile-hover-clr: var(--dark2);
    --text-clr: var(--light-text2);
    --icon-clr: var(--light-accent1);
    --accent-clr: var(--light-accent2);
    --sidebar-title-clr: var(--light-accent1);
  
    /* Sidebar */
    --sidebar-bg-clr: var(--light-bg2);
    --sidebar-clr: var(--light-border);
    --sidebar-logo-clr: var(--light-accent1);
    --sidebar-ul-active-a: var(--light-accent2);
    --sidebar-ul-active-i: var(--light-accent1);
    --sidebar-i-clr: var(--light-accent1);
    --sidebar-a-span-clr: var(--light-text2);
    --sidebar-a-span-hvr-clr: var(--light-accent2);
    --sidebar-a-hvr-clr: var(--light-accent2);
    --toggle-btn-hvr-clr: var(--light-box-bg);
    --sidebar-book-tgl-border-clr: var(--light-accent1);
    --sidebar-book-tgl-border-bg-clr: var(--light-bg3);
    --sidebar-book-tgl-border-box-shadow-clr: var(--sidebar-light-grey);
    --sidebar-sub-menu-clr: var(--light-text2);
    --sidebar-book-toggle-bg-clr: var(--light-accent2);
    --sidebar-book-toggle-box-shadow-clr: var(--sidebar-light-grey);
    --sidebar-tgl-checkbox-box-shadow-clr: var(--orange0);
    --sidebar-tgl-checkbox-bg-clr: var(--orange0);
    --sidebar-sub-menu-a-hvr: var(--light-accent1);
    --Sidebar-mention-notification-clr:  var(--white0);
    --Sidebar-mention-notification-bg-clr: var(--note-hover-red);
  
    --next-event-time-login-reminder-clr: var(--Red-txt-clr);
  
    
    --Sidebar-sidebar-bg-clr:               var(--color-light-bg);
    --Sidebar-scrollbar-track-bg-clr:       var(--color-light-secondary-bg);
    --Sidebar-scrollbar-thumb-bg-clr:       var(--color-light-primary);
    --Sidebar-scrollbar-thumb-border-clr:   var(--color-light-bg);
  
    --tooltip-bg: #f0f0f0; 
    --tooltip-text: #1a3b5d;
  
    /* Calendar */
    --calendar-source-selector--clr:var(--CTA-btn-primary-clr-dark);
  
    /* NextCalendarEvent “Read Note” */
    --Sidebar-Next-Event-next-event-note-bg-clr:        var(--color-tooltip-bg);
    --Sidebar-Next-Event-next-event-note-hover-bg-clr:  var(--color-tooltip-hover-bg);
    --Sidebar-Next-Event-next-event-note-clr:           var(--color-tooltip-text);
    --sidebar-next-event-hover-bg-clr: var(--dark-grey1);
    --sidebar-next-event-active-bg-clr: var(--CTA-btn-primary-clr-dark);
  
  
    /* Topbar */
    --Top__bar__main__text__color: var(--light-accent1);
    --Top__bar__second__text__color: var(--light-accent3);
    --Top__bar__main__hover__color: var(--light-accent2);
    --Top__bar__Login__hover__background__color: var(--light-accent3);
    --Top__bar__Login__hover__color: var(--light-accent1);
    --main__bar__colors: var(--light-bg2);
    --topbar-logo-primary-color: var(--golden-yellow);
    
    --topbar-logo-secondary-color: var(--filler--light);
    --topbar-logo-secondary-color: var(--filler--light);
    --topbar-logo-secondary-color: var(--filler--light);
  
    /* Zoom Slider */
    --zoom__slider__track__color: var(--light-accent1);
    --zoom__slider__thumb__color: var(--bright-yellow);
    --zoom__slider__thumb__hover__shadow: rgba(255, 204, 0, 0.6);
  
    /* Theme Selector */
    --theme__selector__button__toggle__slot__border__color: var(--offwhite);
    --theme__selector__button__toggle__slot__background__color: var(--dark3);
    --theme__selector__button__toggle__slot__box__shadow: var(--white0);
    --theme__selector__button__toggle__button__background__color: var(--dark4);
    --theme__selector__checked__background__color: var(--white0);
    --theme__selector__checked__toggle__button__box__shadow__color: var(--orange0);
    --theme__selector__checked__toggle__button__box__shadow__background__color: var(--orange1);
  
    /* Mobile */
    --mobile__Top__bar__menu__background__color: var(--light-bg2);
    --mobile__Top__bar__toggle__bar: var(--light-accent1);
  
  
    /* General Page css */
    --General-page-bg-clr: var(--general-light-bg);
    --General-page-clr: var(--general-light-content);
    --General-Page-Main-content-container-transition: 0.3s ease-in-out;
    --sidebar-width: 15rem;
    --General-page-accordion-bg-clr: var(--general-light-accordion-bg);
    --General-page-accordion__content__clr: var(--general-light-accordion-content);
    --Main-page-Title-clr: var(--general-light-title);
    --General-page-image-border-clr: var(--general-light-border);
    --General-page-accordion-bold-clr: var(--general-light-bold);
    --Map__Approach__BadComps__SubLabels-clr: var(--general-light-sublabel);
    --General-page-accordion--clr: var(--general-light-accordion-main);
    --General-Page-accordion-box-shadow-clr1: var(--accordion-box-shadow-light1);
    --General-Page-accordion-box-shadow-clr2: var(--accordion-box-shadow-light2);
    --General-Page-accordion-box-shadow-clr3: var(--accordion-box-shadow-light1);
    --General-Page-accordion-box-shadow-clr4: var(--accordion-box-shadow-light2);
    --General-page-accordion-label-bg-clr: var(--filler--light);
  
    --General-Page-heading-xl-clr: var(--General-Page-text-strong-light);
    --General-Page-heading-lg-clr: var(--General-Page-text-subtle-light);
    --General-Page-heading-md-clr: var(--General-Page-text-subtle-light);
    --General-Page-h-label-clr: var(--General-Page-accent-light);
    --General-Page-num-list-clr: var(--General-Page-number-light);
  
    /* Image/Media Selectors */
    --image-selector-active-bg: var(--light-selector-active-bg);
    --image-selector-active-border: var(--light-selector-active-border);
    --image-selector-border: var(--light-selector-border);
    --image-selector-bg: var(--light-selector-bg);
    --image-selector-clr: var(--light-selector-text);
  
    --ImageHoverEffect-tooltip-bg: var(--tooltip-bg-color);
    --ImageHoverEffect-tooltip-text: var(--light-text1);
    --ImageHoverEffect-tooltip-accent: var(--CTA-btn-primary-clr-dark);
    
    
    /* Individual & Team Page */
    --Indiv-Page-bg-clr: var(--clrd3f7fa);
    --Indiv-Page-box-shadow-clr: var(--indiv-page-muted-shadow);
    --Indiv-Page-section-h2-clr: var(--indiv-page-vibrant-blue);
    --Indiv-Page-highlight-item-bg-clr: var(--indiv-page-light-yellow);
    --Indiv-Page-highlight-text-clr: var(--indiv-page-deep-blue);
    --Indiv-Page-highlight-location-clr: var(--indiv-page-grey-text);
    --Indiv-Page-highlight-link-clr: var(--indiv-page-vibrant-blue);
    --Indiv-Page-highlight-link-hvr-clr: var(--indiv-page-hover-blue);
    --Indiv-Page-section-box-p-clr: var(--indiv-page-grey-text);
    --Indiv-Page-favorite-item-bg-clr: var(--indiv-page-light-grey);
    --Indiv-Page-favorite-location-clr: var(--indiv-page-grey-text);
    --Indiv-Page-favorite-link-clr: var(--indiv-page-vibrant-blue);
    --Indiv-Page-favorite-link-hvr-clr: var(--indiv-page-hover-blue);
    --Indiv-Page-highlight-delete-bg-clr: var(--indiv-page-warning-red);
    --Indiv-Page-highlight-delete-clr: var(--white0);
    --Indiv-Page-highlight-delete-hvr-clr: var(--indiv-page-warning-red-hover);
    --Indiv-AND-Team-Page-login-btn-bg-clr: var(--indiv-page-vibrant-blue);
    --Indiv-AND-Team-Page-login-btn-clr: var(--white0);
    --Indiv-AND-Team-Page-login-btn-bg-hvr-clr: var(--indiv-page-hover-blue);
    --Indiv-AND-Team-Page-login-prompt-text-clr: var(--indiv-page-deep-blue);
    --Indiv-AND-Team-Page-highlight-text-clr: var(--general-dark-accordion-content);
  
    --Indiv-Page-notes-textarea-border-clr: var(--indiv-page-vibrant-blue);
    --Indiv-Page-notes-bg-clr: var(--note-soft-yellow);
    --Indiv-Page-notes-text-clr: var(--note-light-text);
    --Indiv-Page-note-save-msg-clr: var(--indiv-page-deep-blue);
    --Indiv-Page-note-item-bg-clr: var(--note-soft-grey);
    --Indiv-Page-note-text-clr: var(--note-light-text);
    --Indiv-Page-note-timestamp-clr: var(--note-muted-grey);
    --Indiv-Page-note-char-count-clr: var(--indiv-page-grey-text);
    --Indiv-Page-note-delete-bg-clr: var(--note-deep-red);
    --Indiv-Page-note-delete-clr: var(--white0);
    --Indiv-Page-highlight-delete-hvr-clr: var(--note-hover-red);
    --Indiv-Page-notes-border-clr: var(--indiv-page-vibrant-blue);
  
    --note-toolbar-bg: var(--note-soft-grey);
    --note-toolbar-border: var(--indiv-page-vibrant-blue);
    --note-toolbar-btn-bg: var(--white0);
    --note-toolbar-btn-clr: var(--note-light-text);
    --note-toolbar-btn-hover-bg: var(--light-box-bg);
    --note-toolbar-select-bg: var(--white0);
    --note-toolbar-active-bg: var(--indiv-page-muted-blue);
    --note-toolbar-active-border: var(--indiv-page-hover-blue);
    --Indiv-Page-note-add-bg-clr: var(--note-add-light-bg);
    --Indiv-Page-note-add-clr: var(--white0);
    --Indiv-Page-note-add-hvr-clr: var(--note-add-light-hover);
    --Indiv-Page-notes-placeholder-clr: var(--note-placeholder-grey-light);
    --Indiv-Page-note-edit-bg-clr: #d4e2f4;
    --Indiv-Page-note-edit-clr: #003366;
    --Indiv-Page-note-edit-hvr-clr: #b5d1ef;
    --Indiv-Page-note-edit-border: #2266aa;
    --Indiv-Page-note-edit-highlight: #e6f2ff;
    --Indiv-Page-note-cancel-bg-clr: #fce8e6;
    --Indiv-Page-note-cancel-clr: #990000;
    --Indiv-Page-note-cancel-hvr-clr: #f5c6c3;
  
    --note-hashtag-color: var(--note-token-hashtag);
    --note-mention-color: var(--note-token-mention);
    
  
    --note-mention-color: #5c8aff;
    --note-mention-highlight-color: var(--note-token-mention);
    --note-mention-highlight-bg: none;
  
    --TeamPage-mention-dropdown-bg-clr:            var(--color-light-bg);
    --TeamPage-mention-dropdown-border-clr:        var(--color-light-border);
    --TeamPage-mention-dropdown-item-hover-bg-clr: var(--color-light-surface-hover);
  
    --TeamPage-badge-user-bg-clr:   #e0f7fa;
    --TeamPage-badge-user-clr:     #006064;
    --TeamPage-badge-team-bg-clr:  #f1f8e9;
    --TeamPage-badge-team-clr:     #33691e;
    --TeamPage-badge-both-bg-clr:  #f3e5f5;
    --TeamPage-badge-both-clr:     #4a148c;
  
  
    /* Footer */
     --footer-container-bg-clr: var(--clrd3f7fa);
    --footer-logo-clr: var(--clr1d5a6d);
    --footer-link-items-h2-clr: var(--clr1d5a6d);
    --footer-link-items-a-clr: var(--clr1d5a6d);
    --footer-social-icon-link-clr: var(--clr1d5a6d);
    --footer-social-media-clr: var(--clr1d5a6d);
    --footer-link-items-a-hvr-clr: var(--clr159db5);
    --footer-social-icon-link-hvr-clr: var(--clr159db5);
    --footer-social-media-bg-clr: var(--clrd3f7fa);
    --footer-website-rights-clr: var(--clr0e131B);
  
    /* Custom Alert */
    --alert__success__bg: #eaf4ff !important;           /* soft light blue */
    --alert__success__text: #004a99 !important;         /* bold navy blue */
  
    --alert__error__bg: #fff4e5 !important;             /* soft pastel yellow */
    --alert__error__text: #7a4f01 !important;           /* warm brown/orange */
  
    --alert__info__bg: #f0f4f8 !important;              /* neutral light grey-blue */
    --alert__info__text: #1a3b5d !important;            /* deep readable navy */
  
    --alert__border__radius: 0.5rem !important;
    --alert__padding: 1rem !important;
  
    /*  */
  }
  
  
  
  
  
  
  /* Add this to your variables.css */
  body.transition-enabled, .page__container.transition-enabled {
  transition: background-color 2s ease, color 2s ease;
  }
  
  body.no-transition, .page__container.no-transition {
  transition: none !important;
  padding: 0 !important;
  }
  
  
  
  
  
  /* Only blur the accordion content, not the whole page */
  .blurred-content .accordian li:not(:has(> label)), 
  .blurred-content .accordian li p, 
  .blurred-content .accordian li img:not(.favorite-icon) {
    filter: blur(8px);
    pointer-events: none;
    user-select: none;
  }
  
  /* ✅ Ensure Labels Are Not Blurred */
  .blurred-content .accordian li label {
    filter: none !important;
    pointer-events: auto !important;
    user-select: auto !important;
  }
  
  /* ✅ Ensure Favorites Buttons Are Not Blurred */
  .blurred-content .accordian li .favorites-container {
    filter: none !important;
    pointer-events: auto !important;
  }
  
  
  /* ✅ Ensure Favorites Dropdown is NOT Blurred */
  .blurred-content .dropdown-menu, 
  .blurred-content .dropdown-item img {
    filter: none !important;
    pointer-events: auto !important;
    user-select: auto !important;
  }
  
  /* ✅ Ensure Subscription Message is NOT Blurred */
  .blurred-content .subscription-message {
    filter: none !important;
    pointer-events: auto !important;
    user-select: auto !important;
  }
  
  /* ✅ Ensure Specific Elements Are NOT Blurred */
  .blurred-content .non-blur {
    filter: none !important;
    pointer-events: auto !important;
    user-select: auto !important;
  }