:root,
[data-bs-theme=light] {
  /* TYPOGRAPHY & FONTS - Default font family for entire application */
  --bs-font-sans-serif: "Public Sans", sans-serif !important;
  --bs-body-font-family: var(--bs-font-sans-serif) !important;

  /* CORE COLOR PALETTE - Utility colors (white, black, etc.) */
  --white: #ffffff;
  --white-rgb: 255, 255, 255;
  --black: #000000;
  --black-rgb: 0, 0, 0;

  /* BACKGROUND COLORS - Light/dark bg colors for layout sections */
  --bg-light: #f5f5f5;
  --bg-light-rgb: 245, 245, 245;
  --bg-dark: #141414;
  --bg-dark-rgb: 20, 20, 20;
  --bg-white: var(--white);
  --bg-white-rgb: var(--white-rgb);
  --bg-black: var(--black);
  --bg-black-rgb: var(--black-rgb);
  --body-light: var(--white);
  --body-light-rgb: var(--white-rgb);
  --body-dark: #1e1e1e;
  --body-dark-rgb: 30, 30, 30;

  /* BORDER COLORS - Semantic borders for UI elements */
  --border-light: #e4e6e8;
  --border-light-rgb: 228, 230, 232;
  --border-dark: #383838;
  --border-dark-rgb: 56, 56, 56;

  /* RSA BRAND COLORS - Primary palette ordered by lightness (95%-38%) */
  --rsa-lightness: #fff0e9;             /* 95% - Subtle backgrounds */
  --rsa-emphasis: #ffd2bb;              /* 90% - Soft borders/hovers */
  --rsa-dark-primary-emphasis: #ffb08e; /* 75% - Light interactive content */
  --rsa-dark-primary-light: #fb814e;    /* 65% - Hover state */
  --rsa-light: #f7bb9c;                 /* 60% - Secondary backgrounds */
  --rsa: #ff5911;                       /* 53% - PRIMARY: Main brand color */
  --rsa-dark: #d44d18;                  /* 45% - Active/pressed state */
  --rsa-emphasis-dark: #b33e10;         /* 38% - Deep emphasis/focus */

  /* BOOTSTRAP PRIMARY MAPPING - RSA brand to --bs-primary system */
  --bs-primary: var(--rsa) !important;
  --bs-primary-rgb: 255, 89, 17 !important;
  --bs-primary-light: var(--rsa-dark-primary-light) !important;
  --bs-primary-dark: var(--rsa-dark) !important;
  --bs-primary-text-emphasis: var(--rsa-emphasis-dark);
  --bs-primary-bg-subtle: var(--rsa-lightness);
  --bs-primary-border-subtle: var(--rsa-emphasis);

  /* BOOTSTRAP SECONDARY & NEUTRAL - Grayscale & secondary colors */
  --bs-secondary: #9c9c9c;
  --bs-secondary-rgb: 156, 156, 156;
  --bs-light: #aaaaaa;
  --bs-dark: #636363;
  
  /* Grayscale progression for subtle backgrounds & text */
  --bs-gray: #808080;
  --bs-gray-dark: #4e5965;
  --bs-gray-25: #f9f9f9;
  --bs-gray-60: #f2f2f2;
  --bs-gray-80: #eeeeee;
  --bs-gray-100: #e5e5e5;
  --bs-gray-200: #cccccc;
  --bs-gray-300: #b3b3b3;
  --bs-gray-400: #999999;
  --bs-gray-500: #808080;
  --bs-gray-600: #666666;
  --bs-gray-700: #4d4d4d;
  --bs-gray-800: #333333;
  --bs-gray-900: #1a1a1a;

  /* Bootstrap aliases for core colors */
  --bs-black: var(--black);
  --bs-white: #fff;

  /* BACKGROUND & SURFACE COLORS - Card, modal, paper backgrounds */
  --bs-paper-bg: #ffffff;
  --bs-paper-bg-rgb: 255, 255, 255;
  --bs-card-bg: #ffffff;
  --bs-body-bg: var(--bg-light);

  /* TEXT & TYPOGRAPHY COLORS - Body, headings, muted text */
  --bs-body-color: #3a3a3a;
  --bs-body-color-rgb: 58, 58, 58;

  /* BORDER & STROKE PROPERTIES - Width, style, colors */
  --bs-border-width: 1px;
  --bs-border-style: solid;
  --bs-border-color: var(--bs-gray-100);
  --bs-border-color-translucent: rgba(34, 34, 34, 0.175);

  /* INTERACTIVE ELEMENT COLORS - Scrollbar, nav links */
  --bs-scrollbar-thumb: #d3d3d3;
  --bs-nav-link-color: #3a3a3a;


  /* NAVIGATION & MENU STYLING - Sidebar colors, hover, active */
  --bs-menu-bg: var(--bs-paper-bg);
  --bs-menu-color: #444444;
  --bs-menu-color-rgb: 68, 68, 68;
  --bs-menu-hover-bg: #eeeeee;
  --bs-menu-hover-color: #222222;
  --bs-menu-active-toggle-bg: #e5e5e5;
  --bs-menu-box-shadow: 0 0.125rem 0.375rem 0 rgba(0, 0, 0, 0.05);

  /* EDITABLE CONTENT BLOCKS - Admin/developer component styling */
  --bs-edit-block-dark-bg: #f5f5f5;
}

/* DARK MODE THEME OVERRIDES - Theme-specific variable overrides */
[data-semidark-menu=true],
[data-bs-theme=dark] {

  /* BACKGROUND & SURFACE COLORS - DARK - Card, modal, paper (dark) */
  --bs-paper-bg: #1e1e1e !important;
  --bs-paper-bg-rgb: 30, 30, 30 !important;
  --bs-card-bg: #1e1e1e !important;
  --bs-modal-bg: #1e1e1e !important;
  --bs-dropdown-bg: #1e1e1e !important;
  --bs-body-bg: var(--bg-dark);
  --bs-body-bg-rgb: var(--bg-dark-rgb);

  /* TEXT & TYPOGRAPHY COLORS - DARK - Body text for dark theme */
  --bs-body-color: #a9a9a9;
  --bs-body-color-rgb: 169, 169, 169;
  --bs-heading-color: #e4e4e4;

  /* BORDER & STROKE PROPERTIES - DARK - Dark borders (0.15 opacity) */
  --bs-border-color: var(--bs-gray-80);
  --bs-border-color-rgb: 52, 52, 52;
  --bs-border-color-translucent: rgba(255, 255, 255, 0.15);
  --bs-border-width: 1px;
  --bs-border-style: solid;

  /* INTERACTIVE ELEMENT COLORS - DARK - Scrollbar, nav links */
  --bs-scrollbar-thumb: #555555;
  --bs-nav-link-color: #cecece;
  --bs-link-color: #fafafa;
  --bs-link-hover-color: #eeeeee;
  --bs-link-color-rgb: 250, 250, 250;
  --bs-link-hover-color-rgb: 238, 238, 238;

  /* TYPOGRAPHY SCALE - DARK - Font sizes (consistent) */
  --bs-font-size-btn: 0.9375rem;
  --bs-font-size-text: 0.9375rem;
  --bs-font-size-heading: 1.75rem;

  /* NAVIGATION & MENU STYLING - DARK - Menu colors, hover, active */
  --bs-menu-bg: #1e1e1e !important;
  --bs-menu-bg-rgb: 30, 30, 30;
  --bs-menu-color: #c5c5c5;
  --bs-menu-color-rgb: 178, 178, 196;
  --bs-menu-hover-bg: rgba(230, 230, 241, 0.06);
  --bs-menu-hover-color: #c2c2c2;
  --bs-menu-active-bg: var(--bs-primary);
  --bs-menu-active-color: #fff;
  --bs-menu-active-toggle-bg: rgba(240, 240, 240, 0.08);
  --bs-menu-sub-active-bg: var(--bs-primary);
  --bs-menu-sub-active-color: #fff;
  --bs-menu-box-shadow: 0 0.125rem 0.375rem 0 rgba(20, 20, 29, 0.2);
  --bs-menu-divider-color: transparent;
  --bs-menu-horizontal-active-bg: var(--bs-menu-bg);

  /* EDITABLE CONTENT BLOCKS - DARK - Admin component (dark) */
  --bs-edit-block-dark-bg: #2a2a2a;

  /* GRAYSCALE PROGRESSION - DARK - Gray scale (inverted) */
  --bs-gray-25: #222222;
  --bs-gray-60: #2a2a2a;
  --bs-gray-80: #333333;
  --bs-gray-100: #3c3c3c;
  --bs-gray-200: #444444;
  --bs-gray-300: #555555;
  --bs-gray-400: #666666;
  --bs-gray-500: #888888;
  --bs-gray-600: #aaaaaa;
  --bs-gray-700: #cecece;
  --bs-gray-800: #e0e0e0;
  --bs-gray-900: #f0f0f0;

  /* SECONDARY & NEUTRAL COLORS - DARK - Secondary variants */
  --bs-secondary: #8b8b8b;
  --bs-secondary-rgb: 128, 128, 128;
  --bs-secondary-color: #8b8b8b;
  --bs-secondary-color-rgb: 139, 139, 139;
  --bs-secondary-bg: #2d2d2d;
  --bs-secondary-bg-rgb: 45, 45, 45;
  --bs-secondary-bg-subtle: #222222;
  --bs-light: #aaaaaa;
  --bs-light-rgb: 180, 180, 180;
  --bs-dark: #636363;
  --bs-dark-rgb: 50, 50, 50;
  --bs-gray: #808080;
  --bs-gray-rgb: 140, 140, 140;

  /* EMPHASIS & TERTIARY COLORS - DARK - Emphasis & tertiary bg */
  --bs-emphasis-color: #ffffff;
  --bs-emphasis-color-rgb: 255, 255, 255;
  --bs-tertiary-color: rgba(206, 206, 206, 0.5);
  --bs-tertiary-color-rgb: 206, 206, 206;
  --bs-tertiary-bg: #222222;
  --bs-tertiary-bg-rgb: 34, 34, 34;

  /* PRIMARY COLOR VARIANTS - DARK - Primary bg subtle */
  --bs-primary-bg-subtle: #3a1e14;

  /* TEXT EMPHASIS COLORS - DARK - Secondary, light, dark text emphasis */
  --bs-secondary-text-emphasis: #c9c9c9;
  --bs-highlight-color: #e0e0e0;
  --bs-light-text-emphasis: #e0e0e0;
  --bs-dark-text-emphasis: #f1f1f1;

  /* BACKDROP & OVERLAY - DARK - Backdrop & opacity */
  --bs-backdrop-bg: #000000;
  --bs-backdrop-opacity: 0.8;

  /* UTILITY & BASE COLORS - DARK - Base colors utility */
  --bs-base-color: #f3f3f3;
  --bs-base-color-rgb: 243, 243, 243;

  /* LEGACY CORE DARK TOKENS - SNEAT template compatibility */
  --core-dark-gray-25: #222222;
  --core-dark-gray-100: #333333;
  --core-dark-gray-200: #444444;
  --core-dark-gray-400: #888888;
  --core-dark-gray-700: #cecece;
  --core-dark-paper-bg: #1e1e1e;
  --core-dark-paper-bg-rgb: 30, 30, 30;
  --core-dark-base-color: #e0e0e0;

}