/* Theme tokens from Symon Version 3. :root is the base; a theme class on html overrides it. */

/* _variables.scss */
:root {
  
  --primary-color: #0056b3;
  --primary-dark: #0842a0;
  --primary-light: #2f7fd6;
  --accent-color: #0f5f5c;
  --accent-dark: #0b4c49;
  --accent-light: #2c7a77;
  --secondary-color: #6c757d;
  --secondary-dark: #545b62;
  
  
  --success-color: #28a745;
  --success-color-dark: #1e7e34;
  --danger-color: #dc3545;
  --danger-color-dark: #b21f2d;
  /* Amber darkened for AA with dark text (white-on-#ffc107 fails ~1.4:1). */
  --warning-color: #b38600;
  --warning-color-dark: #8a6800;
  --info-color: #117a8b;
  --info-color-dark: #0d5c69;
  --error-color: #dc3545;
  
  
  --white: #ffffff;
  --black: #000000;
  --light-gray: #f8f9fa;
  --medium-gray: #dee2e6;
  --dark-gray: #2a2a2a;
  
  
  --bg-primary: #ffffff;
  --bg-secondary: #f8f9fa;
  --bg-tertiary: #e9ecef;
  --bg-disabled: #e9ecef;
  --background-color: #ffffff;
  --background-hover: #f8f9fa;
  --table-hover-bg: var(--background-hover);
  --overlay-scrim: rgba(var(--color-black-rgb), 0.5);
  
  --modal-border-width: 1px;
  --modal-border-color: var(--border-color);
  --modal-border-radius: 1rem;
  --modal-shadow: 0 24px 60px var(--shadow-dark);
  --modal-overlay-scrim: var(--overlay-scrim);
  --modal-overlay-scrim-subtle: rgba(var(--color-black-rgb), 0.35);
  --modal-body-bg: var(--bg-primary);
  --modal-titlebar-bg: var(--bg-tertiary);
  --modal-titlebar-border-color: var(--border-color);
  --modal-title-color: var(--text-primary);
  --modal-close-color: var(--text-secondary);
  --modal-close-hover-bg: var(--background-hover);
  --modal-close-hover-color: var(--text-primary);
  --modal-login-max-width: 20rem;
  --modal-login-gutter-x: 1.25rem;
  --modal-login-gutter-y: 1rem;
  --modal-register-max-width: 34rem;
  --modal-body-padding-y: var(--spacing-lg);
  --modal-body-padding-x: 2.5rem;
  --card-background: #ffffff;
  --select-option-selected-bg: var(--accent-color);
  --select-option-selected-text: var(--white);
  --select-option-hover-bg: var(--bg-secondary);
  --select-option-hover-text: var(--text-primary);
  
  
  --text-primary: #222;
  --text-secondary: #333;
  --text-tertiary: #555;
  --text-muted: #666;
  --text-inverse: #eee;
  --text-color: #2a2a2a;
  --text-on-primary: var(--white);
  
  
  --border-color: #dee2e6;
  --border-light: #e9ecef;
  --border-dark: #adb5bd;
  
  
  --shadow-light: rgba(0, 0, 0, 0.1);
  --shadow-medium: rgba(0, 0, 0, 0.2);
  --shadow-dark: rgba(0, 0, 0, 0.3);
  
  
  --paginator-bg: var(--bg-secondary);
  --paginator-text: var(--text-primary);
  --paginator-border: var(--border-light);
  --paginator-hover: var(--bg-hover, #f0f0f0);
  
  
  --scrollbar-width: 12px;
  --scrollbar-track-bg: var(--bg-secondary);
  --scrollbar-thumb-bg: var(--primary-color);
  --scrollbar-thumb-hover-bg: var(--primary-dark);
  --scrollbar-thumb-border-radius: 6px;

  
  --listing-toolbar-padding: 0.375rem 0.5rem; 
  --listing-toolbar-min-height: 42px;         
  --listing-gap-sm: 0.5rem;                   
  --listing-filter-padding: 6px 10px;         
  --listing-cell-padding: 4px 8px;            
  --listing-cell-font-size: 0.8125rem;        
  --listing-card-padding: 10px;               
  --listing-grid-padding: 0.25rem;            
  
  
  /** Desktop content-row height; with brochure utility + safe-area → `--header-height` in `_layout-foundation.scss`. */
  --header-height-base: 70px;
  /** Width of the desktop glyph sidebar (main-nav). Wide enough for emoji + Material ligatures. */
  --symon-nav-rail-width: 6rem;

  
  --symon-help-trigger-size: 2.75rem;
  --symon-help-trigger-icon-size: 1.5rem;
  --symon-help-trigger-bg: var(--primary-color);
  --symon-help-trigger-fg: var(--text-on-primary);
  
  --symon-help-trigger-ring-width: 1px;
  --symon-help-trigger-border: var(--symon-help-trigger-ring-width) solid var(--primary-light);
  --symon-help-glyph-disc-ratio: 0.58;
  --symon-help-glyph-disc-bg: #fff;
  --symon-help-glyph-mark-color: var(--primary-color);
  --symon-help-trigger-hover-bg: var(--primary-dark);
  --symon-help-trigger-hover-border: var(--primary-color);
  --symon-help-trigger-shadow: 0 1px 4px rgba(var(--primary-color-rgb), 0.4);
  --symon-help-trigger-shadow-hover: 0 2px 6px rgba(var(--primary-color-rgb), 0.5);

  
  --contextual-help-z-index: 3200;
  --contextual-help-overlay-scrim: var(--modal-overlay-scrim);
  --contextual-help-panel-bg: var(--modal-body-bg);
  --contextual-help-panel-border-width: var(--modal-border-width);
  --contextual-help-panel-border-color: var(--modal-border-color);
  --contextual-help-panel-radius: var(--modal-border-radius);
  --contextual-help-panel-shadow: var(--modal-shadow);
  --contextual-help-titlebar-bg: var(--modal-titlebar-bg);
  --contextual-help-titlebar-border-color: var(--modal-titlebar-border-color);
  --contextual-help-title-color: var(--modal-title-color);
  --contextual-help-close-color: var(--modal-close-color);
  --contextual-help-close-hover-bg: var(--modal-close-hover-bg);
  --contextual-help-close-hover-color: var(--modal-close-hover-color);
  --contextual-help-filename-color: var(--text-muted);
  --contextual-help-body-color: var(--text-primary);
  --contextual-help-code-bg: var(--bg-tertiary);
  --contextual-help-link-color: var(--primary-color);
  --contextual-help-resize-handle-color: var(--text-muted);

  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 3rem;
  --spacing-xxl: 4rem;
  
  
  --border-radius: 0.375rem;
  --border-radius-sm: 0.25rem;
  --border-radius-lg: 0.5rem;
  
  
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --emoji-font-family: 'Segoe UI Emoji', 'Segoe UI Symbol', 'Apple Color Emoji', 'Noto Color Emoji', sans-serif;

  
  --calendar-task-bg: var(--success-color);
  --calendar-task-text: var(--white);
  --calendar-task-border: var(--success-color);
  --calendar-ticket-bg: var(--primary-color);
  --calendar-ticket-text: var(--white);
  --calendar-ticket-border: var(--primary-color);
  --calendar-round-bg: var(--info-color);
  --calendar-round-text: var(--white);
  --calendar-round-border: var(--info-color);
  --calendar-course-bg: #7c3aed;
  --calendar-course-text: var(--white);
  --calendar-course-border: #7c3aed;
  --calendar-google-bg: #4285f4;
  --calendar-google-text: var(--white);
  --calendar-google-border: #4285f4;
  --calendar-reminder-bg: var(--warning-color);
  --calendar-reminder-text: var(--black);
  --calendar-reminder-border: var(--warning-color);
  --calendar-today-bg: rgba(0, 123, 255, 0.1);
  --calendar-today-border: var(--primary-color);
  --calendar-event-font-size: var(--font-size-sm);
  --calendar-event-font-weight: 500;
  --calendar-show-details: true; /* true/false for showing event details */

  
  --color-white-rgb: 255, 255, 255;
  --color-black-rgb: 0, 0, 0;
  --primary-color-rgb: 0, 86, 179; 
  --accent-color-rgb: 15, 95, 92;
  --color-primary-rgb: 25, 118, 210;
  --color-primary-dark-rgb: 21, 101, 192;
  --color-secondary-rgb: 108, 117, 125;
  --color-secondary-dark-rgb: 84, 91, 98;
  --danger-color-rgb: 220, 53, 69; 
  --color-error-rgb: 244, 67, 54;
  --success-color-rgb: 40, 167, 69; 
  --color-success-rgb: 76, 175, 80;
  --color-warning-rgb: 255, 193, 7;

  
  --cloud-leader-line-color: #ffffff;
  --cloud-leader-line-opacity: 0.8; 
  --cloud-leader-line-width: 1.0;   
  --cloud-label-border-color: rgba(255, 255, 255, 0.25);
  --cloud-label-border-width: 1px;

  
  --cloud-leader-shadow-color: rgba(0, 0, 0, 0.55);
  --cloud-leader-shadow-opacity: 0.55;
  --cloud-leader-shadow-width-extra: 1.25; 
  --cloud-leader-shadow-translate-x: 1.0;  
  --cloud-leader-shadow-translate-y: 1.5;  
  --cloud-leader-shadow-blur: 1.2;         


  
  --legacy-color-005a92: #005a92;
  --legacy-color-0078d7: #0078d7;
  --legacy-color-007ac2: #007ac2;
  --legacy-color-0095db: #0095db;
  --legacy-color-047857: #047857;
  --legacy-color-0969da: #0969da;
  --legacy-color-0c5460: #0c5460;
  --legacy-color-111: #111;
  --legacy-color-155724: #155724;
  --legacy-color-1565c0: #1565c0;
  --legacy-color-16a34a: #16a34a;
  --legacy-color-1a1a1a: #1a1a1a;
  --legacy-color-1a7f37: #1a7f37;
  --legacy-color-1d4ed8: #1d4ed8;
  --legacy-color-1e1e1e: #1e1e1e;
  --legacy-color-1e7e34: #1e7e34;
  --legacy-color-2d2d2d: #2d2d2d;
  --legacy-color-2e7d32: #2e7d32;
  --legacy-color-333: #333;
  --legacy-color-388e3c: #388e3c;
  --legacy-color-3a3a3a: #3a3a3a;
  --legacy-color-3a6ea8: #3a6ea8;
  --legacy-color-3d8b40: #3d8b40;
  --legacy-color-4285f4: #4285f4;
  --legacy-color-4338ca: #4338ca;
  --legacy-color-444: #444;
  --legacy-color-45a049: #45a049;
  --legacy-color-4ade80: #4ade80;
  --legacy-color-4caf50-2: #4CAF50;
  --legacy-color-4f46e5: #4f46e5;
  --legacy-color-555: #555;
  --legacy-color-60a5fa: #60a5fa;
  --legacy-color-616161: #616161;
  --legacy-color-6366f1: #6366f1;
  --legacy-color-6a1b9a: #6a1b9a;
  --legacy-color-7c3aed: #7c3aed;
  --legacy-color-856404: #856404;
  --legacy-color-86efac: #86efac;
  --legacy-color-8b5cf6: #8b5cf6;
  --legacy-color-93c5fd: #93c5fd;
  --legacy-color-9a3412: #9a3412;
  --legacy-color-9a6700: #9a6700;
  --legacy-color-a78bfa: #a78bfa;
  --legacy-color-b45309: #b45309;
  --legacy-color-b71c1c: #b71c1c;
  --legacy-color-b91c1c: #b91c1c;
  --legacy-color-bd2130: #bd2130;
  --legacy-color-c33: #c33;
  --legacy-color-c4b5fd: #c4b5fd;
  --legacy-color-c82333: #c82333;
  --legacy-color-c98a16: #c98a16;
  --legacy-color-ca8a04: #ca8a04;
  --legacy-color-ccc: #ccc;
  --legacy-color-cf222e: #cf222e;
  --legacy-color-d1ecf1: #d1ecf1;
  --legacy-color-d32f2f: #d32f2f;
  --legacy-color-d4edda: #d4edda;
  --legacy-color-d73027: #d73027;
  --legacy-color-d9534f: #d9534f;
  --legacy-color-dc2626: #dc2626;
  --legacy-color-e0e0e0: #e0e0e0;
  --legacy-color-e8f4fd: #e8f4fd;
  --legacy-color-ea580c: #ea580c;
  --legacy-color-eab308: #eab308;
  --legacy-color-edf6f0: #edf6f0;
  --legacy-color-ef4444: #ef4444;
  --legacy-color-f0f4f8: #f0f4f8;
  --legacy-color-f0f4fb: #f0f4fb;
  --legacy-color-f44: #f44;
  --legacy-color-f44336: #f44336;
  --legacy-color-f87171: #f87171;
  --legacy-color-f97316: #f97316;
  --legacy-color-facc15: #facc15;
  --legacy-color-fca5a5: #fca5a5;
  --legacy-color-fde8e8: #fde8e8;
  --legacy-color-fdf6e8: #fdf6e8;
  --legacy-color-fee: #fee;
  --legacy-color-fef3cd: #fef3cd;
  --legacy-color-ff9800: #ff9800;
  --legacy-color-ffeaa7: #ffeaa7;
  --legacy-color-fff3cd: #fff3cd;
  --legacy-color-fff5f5: #fff5f5;
  --legacy-color-ffffff11: #ffffff11;
  --legacy-color-rgb-0-0-0-0-35: rgb(0 0 0 / 0.35);
  --legacy-color-rgba-0-120-212-0-1: rgba(0, 120, 212, 0.1);
  --legacy-color-rgba-0-120-215-0-3: rgba(0, 120, 215, 0.3);
  --legacy-color-rgba-0-120-215-0-5: rgba(0, 120, 215, 0.5);
  --legacy-color-rgba-0-120-215-0-6: rgba(0, 120, 215, 0.6);
  --legacy-color-rgba-0-120-215-0-8: rgba(0, 120, 215, 0.8);
  --legacy-color-rgba-0-120-215-0-9: rgba(0, 120, 215, 0.9);
  --legacy-color-rgba-0-122-194-0-1: rgba(0, 122, 194, 0.1);
  --legacy-color-rgba-10-10-10-0-3: rgba(10, 10, 10, 0.3);
  --legacy-color-rgba-10-10-10-0-45: rgba(10, 10, 10, 0.45);
  --legacy-color-rgba-100-100-100-0-3: rgba(100, 100, 100, 0.3);
  --legacy-color-rgba-100-100-100-0-5: rgba(100, 100, 100, 0.5);
  --legacy-color-rgba-108-117-125-0-3: rgba(108, 117, 125, 0.3);
  --legacy-color-rgba-120-120-120-0-35: rgba(120, 120, 120, 0.35);
  --legacy-color-rgba-120-120-120-0-4: rgba(120, 120, 120, 0.4);
  --legacy-color-rgba-123-31-162-0-12: rgba(123, 31, 162, 0.12);
  --legacy-color-rgba-13-110-253-0-25: rgba(13, 110, 253, 0.25);
  --legacy-color-rgba-139-92-246-0-2: rgba(139, 92, 246, 0.2);
  --legacy-color-rgba-139-92-246-0-3: rgba(139, 92, 246, 0.3);
  --legacy-color-rgba-139-92-246-0-4: rgba(139, 92, 246, 0.4);
  --legacy-color-rgba-158-158-158-0-1: rgba(158, 158, 158, 0.1);
  --legacy-color-rgba-158-158-158-0-15: rgba(158, 158, 158, 0.15);
  --legacy-color-rgba-158-158-158-0-3: rgba(158, 158, 158, 0.3);
  --legacy-color-rgba-16-185-129-0-12: rgba(16, 185, 129, 0.12);
  --legacy-color-rgba-16-185-129-0-4: rgba(16, 185, 129, 0.4);
  --legacy-color-rgba-180-83-9-0-2: rgba(180, 83, 9, 0.2);
  --legacy-color-rgba-183-28-28-0-08: rgba(183, 28, 28, 0.08);
  --legacy-color-rgba-183-28-28-0-35: rgba(183, 28, 28, 0.35);
  --legacy-color-rgba-200-200-200-0-5: rgba(200, 200, 200, 0.5);
  --legacy-color-rgba-200-200-200-0-8: rgba(200, 200, 200, 0.8);
  --legacy-color-rgba-207-34-46-0-35: rgba(207, 34, 46, 0.35);
  --legacy-color-rgba-211-47-47-0-02: rgba(211, 47, 47, 0.02);
  --legacy-color-rgba-211-47-47-0-05: rgba(211, 47, 47, 0.05);
  --legacy-color-rgba-211-47-47-0-1: rgba(211, 47, 47, 0.1);
  --legacy-color-rgba-215-48-39-0-1: rgba(215, 48, 39, 0.1);
  --legacy-color-rgba-217-119-6-0-12: rgba(217, 119, 6, 0.12);
  --legacy-color-rgba-22-22-22-0-95: rgba(22,22,22,0.95);
  --legacy-color-rgba-23-162-184-0-3: rgba(23, 162, 184, 0.3);
  --legacy-color-rgba-23-162-184-0-9: rgba(23, 162, 184, 0.9);
  --legacy-color-rgba-234-179-8-0-08: rgba(234, 179, 8, 0.08);
  --legacy-color-rgba-234-179-8-0-15: rgba(234, 179, 8, 0.15);
  --legacy-color-rgba-239-68-68-0-05: rgba(239, 68, 68, 0.05);
  --legacy-color-rgba-239-68-68-0-15: rgba(239, 68, 68, 0.15);
  --legacy-color-rgba-239-68-68-0-2: rgba(239, 68, 68, 0.2);
  --legacy-color-rgba-239-68-68-0-3: rgba(239, 68, 68, 0.3);
  --legacy-color-rgba-239-68-68-0-4: rgba(239, 68, 68, 0.4);
  --legacy-color-rgba-239-68-68-0-5: rgba(239, 68, 68, 0.5);
  --legacy-color-rgba-244-67-54-0-1: rgba(244, 67, 54, 0.1);
  --legacy-color-rgba-244-67-54-0-12: rgba(244, 67, 54, 0.12);
  --legacy-color-rgba-244-67-54-0-3: rgba(244, 67, 54, 0.3);
  --legacy-color-rgba-25-118-210-0-12: rgba(25, 118, 210, 0.12);
  --legacy-color-rgba-255-152-0-0-1: rgba(255, 152, 0, 0.1);
  --legacy-color-rgba-255-193-7-0-1: rgba(255, 193, 7, 0.1);
  --legacy-color-rgba-255-193-7-0-15: rgba(255, 193, 7, 0.15);
  --legacy-color-rgba-255-237-213-0-72: rgba(255, 237, 213, 0.72);
  --legacy-color-rgba-34-197-94-0-1: rgba(34, 197, 94, 0.1);
  --legacy-color-rgba-34-197-94-0-12: rgba(34, 197, 94, 0.12);
  --legacy-color-rgba-34-197-94-0-15: rgba(34, 197, 94, 0.15);
  --legacy-color-rgba-34-197-94-0-2: rgba(34, 197, 94, 0.2);
  --legacy-color-rgba-34-197-94-0-3: rgba(34, 197, 94, 0.3);
  --legacy-color-rgba-34-197-94-0-4: rgba(34, 197, 94, 0.4);
  --legacy-color-rgba-34-34-34-0-95: rgba(34,34,34,0.95);
  --legacy-color-rgba-37-99-235-0-2: rgba(37, 99, 235, 0.2);
  --legacy-color-rgba-37-99-235-0-3: rgba(37, 99, 235, 0.3);
  --legacy-color-rgba-37-99-235-0-5: rgba(37, 99, 235, 0.5);
  --legacy-color-rgba-56-103-255-0-15: rgba(56, 103, 255, 0.15);
  --legacy-color-rgba-59-130-246-0-1: rgba(59, 130, 246, 0.1);
  --legacy-color-rgba-59-130-246-0-12: rgba(59, 130, 246, 0.12);
  --legacy-color-rgba-59-130-246-0-2: rgba(59, 130, 246, 0.2);
  --legacy-color-rgba-59-130-246-0-3: rgba(59, 130, 246, 0.3);
  --legacy-color-rgba-59-130-246-0-4: rgba(59, 130, 246, 0.4);
  --legacy-color-rgba-59-130-246-0-5: rgba(59, 130, 246, 0.5);
  --legacy-color-rgba-59-130-246-0-7: rgba(59, 130, 246, 0.7);
  --legacy-color-rgba-66-133-244-0-9: rgba(66, 133, 244, 0.9);
  --legacy-color-rgba-76-175-80-0-1: rgba(76, 175, 80, 0.1);
  --legacy-color-rgba-76-175-80-0-15: rgba(76, 175, 80, 0.15);
  --legacy-color-rgba-76-175-80-0-3: rgba(76, 175, 80, 0.3);
  --legacy-color-rgba-76-175-80-0-5: rgba(76, 175, 80, 0.5);
  --legacy-color-rgba-76-175-80-0-6: rgba(76, 175, 80, 0.6);
  --legacy-color-rgba-99-102-241-0-1: rgba(99, 102, 241, 0.1);
  --legacy-color-rgba-99-102-241-0-12: rgba(99, 102, 241, 0.12);
}






@include meta.load-css('light');
@include meta.load-css('light-ocean');
@include meta.load-css('light-cherry');
@include meta.load-css('light-amber');
@include meta.load-css('light-lavender');
@include meta.load-css('light-coral');
@include meta.load-css('light-teal');
@include meta.load-css('light-rose');
@include meta.load-css('light-slate');


@include meta.load-css('dark');
@include meta.load-css('dark-green');
@include meta.load-css('dark-ocean');
@include meta.load-css('dark-crimson');
@include meta.load-css('dark-amber');
@include meta.load-css('dark-purple');
@include meta.load-css('dark-teal');
@include meta.load-css('dark-rose');
@include meta.load-css('dark-slate');
@include meta.load-css('dark-indigo');


@include meta.load-css('high-contrast-dark');
@include meta.load-css('high-contrast-light');
@include meta.load-css('high-contrast-light-amber');
@include meta.load-css('high-contrast-dark-amber');
@include meta.load-css('high-contrast-dark-blue');


@include meta.load-css('grayscale');

@include meta.load-css('auto');

/* _dark-amber.scss */
.dark-amber-theme {
  /* === Core Backgrounds === */
  --bg-primary:        #150e03;   /* near-black warm brown — body */
  --bg-secondary:      #221605;   /* dark amber workspace */
  --bg-tertiary:       #302008;   /* sidebars/cards — clearly lifted */
  --bg-disabled:       #402c10;

  --background-color:  var(--bg-primary);
  --background-hover:  #3a2c0c;
  --card-background:   var(--bg-tertiary);
  --section-bg-color:  var(--bg-secondary);

  /* === Text === */
  --text-primary:   #fff8e0;   /* near-white warm cream — ~16:1 on bg-primary */
  --text-secondary: #ffd870;   /* bright gold — ~9:1 */
  --text-tertiary:  #f0b040;   /* warm amber — ~5:1 */
  --text-muted:     #c89020;   /* muted gold — ~4.5:1 on bg-tertiary */
  --text-inverse:   #150e03;
  --text-color:     var(--text-primary);

  /* === Borders === */
  --border-color:  #604010;
  --border-light:  #483008;
  --border-dark:   #906020;
  --contextual-help-panel-border-width: 1px;
  --contextual-help-panel-border-color: var(--border-dark);

  /* === UI Surfaces === */
  --table-hover-bg: #3a2c0c;
  --input-bg:       #221605;
  --card-bg:        var(--bg-tertiary);
  --toolbar-bg:     var(--bg-secondary);

  /* === Brand === */
  --primary-color:     #f0a500;
  --primary-dark:      #c07800;
  --primary-light:     #ffc844;
  --primary-color-rgb: 240, 165, 0;

  --accent-color:     #ffc300;
  --accent-dark:      #d49800;
  --accent-light:     #ffdc60;
  --accent-color-rgb: 255, 195, 0;

  /* === Status (vibrant on dark) === */
  --success-color:      #69f0ae;
  --success-color-dark: #00c060;
  --success-color-rgb:  105, 240, 174;

  --danger-color:      #ff5252;
  --danger-color-dark: #d32f2f;
  --danger-color-rgb:  255, 82, 82;

  --warning-color:      #ffe066;
  --warning-color-dark: #d4b800;
  --warning-color-rgb:  255, 224, 102;

  --info-color:      #40c4ff;
  --info-color-dark: #0090d4;
  --info-color-rgb:  64, 196, 255;

  /* === Scrollbar === */
  --scrollbar-track-bg:       var(--bg-secondary);
  --scrollbar-thumb-bg:       #f0a500;
  --scrollbar-thumb-hover-bg: #ffc844;

  /* === Shadows === */
  --shadow-light:  rgba(0, 0, 0, 0.35);
  --shadow-medium: rgba(0, 0, 0, 0.55);
  --shadow-dark:   rgba(0, 0, 0, 0.75);

  /* === Cloud Visuals === */
  --cloud-leader-line-color: #ffc844;
  --cloud-leader-line-opacity: 0.90;
  --cloud-leader-line-width: 1.0;
  --cloud-label-border-color: rgba(240, 165, 0, 0.40);
  --cloud-label-border-width: 1px;
  --cloud-leader-shadow-color: rgba(0, 0, 0, 0.65);
  --cloud-leader-shadow-opacity: 0.65;
  --cloud-leader-shadow-width-extra: 1.25;
  --cloud-leader-shadow-translate-x: 1.0;
  --cloud-leader-shadow-translate-y: 1.8;
  --cloud-leader-shadow-blur: 1.4;

  /* === Paginator === */
  --paginator-bg:     var(--section-bg-color);
  --paginator-text:   var(--text-primary);
  --paginator-border: var(--border-light);
  --paginator-hover:  #3a2c0c;
}

/* _dark-crimson.scss */
.dark-crimson-theme {
  /* === Core Backgrounds === */
  --bg-primary:        #150508;   /* near-black crimson — body */
  --bg-secondary:      #220a0f;   /* deep maroon workspace */
  --bg-tertiary:       #301018;   /* sidebars/cards — clearly lifted */
  --bg-disabled:       #401820;

  --background-color:  var(--bg-primary);
  --background-hover:  #3a1520;
  --card-background:   var(--bg-tertiary);
  --section-bg-color:  var(--bg-secondary);

  /* === Text === */
  --text-primary:   #ffe0e3;   /* near-white rose-tinted — ~15:1 on bg-primary */
  --text-secondary: #ffb0b8;   /* bright rose — ~8:1 */
  --text-tertiary:  #ff8090;   /* vivid coral — ~5:1 */
  --text-muted:     #c86070;   /* muted rose — ~4.5:1 on bg-tertiary */
  --text-inverse:   #150508;
  --text-color:     var(--text-primary);

  /* === Borders === */
  --border-color:  #602030;
  --border-light:  #481820;
  --border-dark:   #903040;
  --contextual-help-panel-border-width: 1px;
  --contextual-help-panel-border-color: var(--border-dark);

  /* === UI Surfaces === */
  --table-hover-bg: #3a1520;
  --input-bg:       #220a0f;
  --card-bg:        var(--bg-tertiary);
  --toolbar-bg:     var(--bg-secondary);

  /* === Brand === */
  --primary-color:     #ff4444;
  --primary-dark:      #cc2222;
  --primary-light:     #ff7070;
  --primary-color-rgb: 255, 68, 68;

  --accent-color:     #ff6b6b;
  --accent-dark:      #ee4444;
  --accent-light:     #ff9999;
  --accent-color-rgb: 255, 107, 107;

  /* === Status (vibrant on dark) === */
  --success-color:      #00e676;
  --success-color-dark: #00c060;
  --success-color-rgb:  0, 230, 118;

  --danger-color:      #ff1744;
  --danger-color-dark: #d50000;
  --danger-color-rgb:  255, 23, 68;

  --warning-color:      #ffab40;
  --warning-color-dark: #e08020;
  --warning-color-rgb:  255, 171, 64;

  --info-color:      #40c4ff;
  --info-color-dark: #0090d4;
  --info-color-rgb:  64, 196, 255;

  /* === Scrollbar === */
  --scrollbar-track-bg:       var(--bg-secondary);
  --scrollbar-thumb-bg:       #ff4444;
  --scrollbar-thumb-hover-bg: #ff7070;

  /* === Shadows === */
  --shadow-light:  rgba(0, 0, 0, 0.35);
  --shadow-medium: rgba(0, 0, 0, 0.55);
  --shadow-dark:   rgba(0, 0, 0, 0.75);

  /* === Cloud Visuals === */
  --cloud-leader-line-color: #ff7070;
  --cloud-leader-line-opacity: 0.90;
  --cloud-leader-line-width: 1.0;
  --cloud-label-border-color: rgba(255, 68, 68, 0.40);
  --cloud-label-border-width: 1px;
  --cloud-leader-shadow-color: rgba(0, 0, 0, 0.65);
  --cloud-leader-shadow-opacity: 0.65;
  --cloud-leader-shadow-width-extra: 1.25;
  --cloud-leader-shadow-translate-x: 1.0;
  --cloud-leader-shadow-translate-y: 1.8;
  --cloud-leader-shadow-blur: 1.4;

  /* === Paginator === */
  --paginator-bg:     var(--section-bg-color);
  --paginator-text:   var(--text-primary);
  --paginator-border: var(--border-light);
  --paginator-hover:  #3a1520;
}

/* _dark-green.scss */
.dark-green-theme {
  /* === Core Backgrounds (deep forest layering — each layer lifts off the one below) === */
  --bg-primary:        #0c1e0f;   /* rich forest floor — body, darkest */
  --bg-secondary:      #163019;   /* panels / sections — clearly lifted above body */
  --bg-tertiary:       #20492a;   /* card surfaces / listings — most lifted */
  --bg-disabled:       #2a5733;

  --background-color:  var(--bg-primary);
  --background-hover:  #245530;   /* clearly lifted hover state */
  --card-background:   var(--bg-tertiary);

  --section-bg-color:  var(--bg-secondary);

  /* === Text Colors (crisp, high-contrast hierarchy) === */
  --text-primary:      #e6f4e1;   /* near-white with green tint — very readable */
  --text-secondary:    #a8d5a2;   /* medium sage — clear secondary step */
  --text-tertiary:     #78b87e;   /* moss green — distinct from secondary */
  --text-muted:        #5a8f60;   /* still legible against dark bg */
  --text-inverse:      #0e2211;
  --text-color:        var(--text-primary);

  /* === Borders (visible against both panels and cards) === */
  --border-color:      #357a40;
  --border-light:      #2a5a33;
  --border-dark:       #52a05a;
  --contextual-help-panel-border-width: 1px;
  --contextual-help-panel-border-color: var(--border-dark);

  /* === UI Surfaces === */
  --table-hover-bg:    #245530;
  --input-bg:          #14301a;
  --card-bg:           #20492a;
  --toolbar-bg:        var(--bg-secondary);

  /* === Brand Greens === */
  --primary-color:         #4caf50;
  --primary-dark:          #388e3c;
  --primary-light:         #81c784;
  --primary-color-rgb:     76, 175, 80;

  --accent-color:          #43a047;
  --accent-dark:           #2e7d32;
  --accent-light:          #66bb6a;
  --accent-color-rgb:      67, 160, 71;

  /* === Status Colors (kept vibrant for clarity) === */
  --success-color:         #69f0ae;
  --success-color-dark:    #00e676;
  --success-color-rgb:     105, 240, 174;

  --danger-color:          #ef5350;
  --danger-color-dark:     #c62828;
  --danger-color-rgb:      239, 83, 80;

  --warning-color:         #ffca28;
  --warning-color-dark:    #f9a825;
  --warning-color-rgb:     255, 202, 40;

  --info-color:            #4dd0e1;
  --info-color-dark:       #0097a7;
  --info-color-rgb:        77, 208, 225;

  /* === Scrollbar === */
  --scrollbar-track-bg:    var(--bg-secondary);
  --scrollbar-thumb-bg:    #4caf50;
  --scrollbar-thumb-hover-bg: #81c784;

  /* === Shadows === */
  --shadow-light:          rgba(0, 0, 0, 0.30);
  --shadow-medium:         rgba(0, 0, 0, 0.50);
  --shadow-dark:           rgba(0, 0, 0, 0.70);

  /* === Cloud Visuals === */
  --cloud-leader-line-color: #81c784;
  --cloud-leader-line-opacity: 0.90;
  --cloud-leader-line-width: 1.0;
  --cloud-label-border-color: rgba(129, 199, 132, 0.35);
  --cloud-label-border-width: 1px;
  --cloud-leader-shadow-color: rgba(0, 0, 0, 0.55);
  --cloud-leader-shadow-opacity: 0.55;
  --cloud-leader-shadow-width-extra: 1.25;
  --cloud-leader-shadow-translate-x: 1.0;
  --cloud-leader-shadow-translate-y: 1.8;
  --cloud-leader-shadow-blur: 1.4;

  /* === Paginator === */
  --paginator-bg:          var(--section-bg-color);
  --paginator-text:        var(--text-primary);
  --paginator-border:      var(--border-light);
  --paginator-hover:       #245530;
}

/* _dark-indigo.scss */
.dark-indigo-theme {
  /* === Core Backgrounds === */
  --bg-primary:        #080718;   /* near-black indigo — body */
  --bg-secondary:      #100f28;   /* deep indigo workspace */
  --bg-tertiary:       #181638;   /* sidebars/cards — clearly lifted */
  --bg-disabled:       #221e4a;

  --background-color:  var(--bg-primary);
  --background-hover:  #201c45;
  --card-background:   var(--bg-tertiary);
  --section-bg-color:  var(--bg-secondary);

  /* === Text === */
  --text-primary:   #ebe8ff;   /* near-white indigo-tinted — ~15:1 on bg-primary */
  --text-secondary: #c0b8ff;   /* bright indigo — ~8:1 */
  --text-tertiary:  #9888f0;   /* vivid violet — ~5:1 */
  --text-muted:     #7060c8;   /* muted indigo — ~4.5:1 on bg-tertiary */
  --text-inverse:   #080718;
  --text-color:     var(--text-primary);

  /* === Borders === */
  --border-color:  #2e2868;
  --border-light:  #221e50;
  --border-dark:   #5048a8;
  --contextual-help-panel-border-width: 1px;
  --contextual-help-panel-border-color: var(--border-dark);

  /* === UI Surfaces === */
  --table-hover-bg: #201c45;
  --input-bg:       #100f28;
  --card-bg:        var(--bg-tertiary);
  --toolbar-bg:     var(--bg-secondary);

  /* === Brand === */
  --primary-color:     #7a7aff;
  --primary-dark:      #5858e8;
  --primary-light:     #9898ff;
  --primary-color-rgb: 122, 122, 255;

  --accent-color:     #9090ff;
  --accent-dark:      #7070ee;
  --accent-light:     #b0b0ff;
  --accent-color-rgb: 144, 144, 255;

  /* === Status (vibrant on dark) === */
  --success-color:      #69f0ae;
  --success-color-dark: #00c060;
  --success-color-rgb:  105, 240, 174;

  --danger-color:      #ff5252;
  --danger-color-dark: #d32f2f;
  --danger-color-rgb:  255, 82, 82;

  --warning-color:      #ffab40;
  --warning-color-dark: #e08020;
  --warning-color-rgb:  255, 171, 64;

  --info-color:      #8888ff;
  --info-color-dark: #6666e8;
  --info-color-rgb:  136, 136, 255;

  /* === Scrollbar === */
  --scrollbar-track-bg:       var(--bg-secondary);
  --scrollbar-thumb-bg:       #7a7aff;
  --scrollbar-thumb-hover-bg: #9898ff;

  /* === Shadows === */
  --shadow-light:  rgba(0, 0, 0, 0.35);
  --shadow-medium: rgba(0, 0, 0, 0.55);
  --shadow-dark:   rgba(0, 0, 0, 0.75);

  /* === Cloud Visuals === */
  --cloud-leader-line-color: #9898ff;
  --cloud-leader-line-opacity: 0.90;
  --cloud-leader-line-width: 1.0;
  --cloud-label-border-color: rgba(122, 122, 255, 0.40);
  --cloud-label-border-width: 1px;
  --cloud-leader-shadow-color: rgba(0, 0, 0, 0.65);
  --cloud-leader-shadow-opacity: 0.65;
  --cloud-leader-shadow-width-extra: 1.25;
  --cloud-leader-shadow-translate-x: 1.0;
  --cloud-leader-shadow-translate-y: 1.8;
  --cloud-leader-shadow-blur: 1.4;

  /* === Paginator === */
  --paginator-bg:     var(--section-bg-color);
  --paginator-text:   var(--text-primary);
  --paginator-border: var(--border-light);
  --paginator-hover:  #201c45;
}

/* _dark-ocean.scss */
.dark-ocean-theme {
  /* === Core Backgrounds (each layer clearly distinct) === */
  --bg-primary:        #061522;   /* deepest midnight navy — body */
  --bg-secondary:      #0d2035;   /* workspace navy */
  --bg-tertiary:       #152d48;   /* sidebars/cards — visibly lifted */
  --bg-disabled:       #1e3a5c;

  --background-color:  var(--bg-primary);
  --background-hover:  #1a3a58;
  --card-background:   var(--bg-tertiary);
  --section-bg-color:  var(--bg-secondary);

  /* === Text (high contrast on all dark surfaces) === */
  --text-primary:   #e0f4ff;   /* near-white blue-tinted — ~16:1 on bg-primary */
  --text-secondary: #9dd4f0;   /* bright ocean blue — ~9:1 */
  --text-tertiary:  #68b8e0;   /* medium ocean — ~5.5:1 */
  --text-muted:     #4a8fb5;   /* ~4.5:1 on bg-tertiary */
  --text-inverse:   #061522;
  --text-color:     var(--text-primary);

  /* === Borders === */
  --border-color:  #1e4a70;
  --border-light:  #163860;
  --border-dark:   #3a78a8;
  --contextual-help-panel-border-width: 1px;
  --contextual-help-panel-border-color: var(--border-dark);

  /* === UI Surfaces === */
  --table-hover-bg: #1a3a58;
  --input-bg:       #0d2035;
  --card-bg:        var(--bg-tertiary);
  --toolbar-bg:     var(--bg-secondary);

  /* === Brand === */
  --primary-color:     #00b4d8;
  --primary-dark:      #0090b0;
  --primary-light:     #48cae4;
  --primary-color-rgb: 0, 180, 216;

  --accent-color:     #00e0ff;
  --accent-dark:      #00b8d8;
  --accent-light:     #60f0ff;
  --accent-color-rgb: 0, 224, 255;

  /* === Status (vibrant on dark) === */
  --success-color:      #00e676;
  --success-color-dark: #00c060;
  --success-color-rgb:  0, 230, 118;

  --danger-color:      #ff5252;
  --danger-color-dark: #d32f2f;
  --danger-color-rgb:  255, 82, 82;

  --warning-color:      #ffab40;
  --warning-color-dark: #e08020;
  --warning-color-rgb:  255, 171, 64;

  --info-color:      #40c4ff;
  --info-color-dark: #0090d4;
  --info-color-rgb:  64, 196, 255;

  /* === Scrollbar === */
  --scrollbar-track-bg:       var(--bg-secondary);
  --scrollbar-thumb-bg:       #00b4d8;
  --scrollbar-thumb-hover-bg: #48cae4;

  /* === Shadows === */
  --shadow-light:  rgba(0, 0, 0, 0.35);
  --shadow-medium: rgba(0, 0, 0, 0.55);
  --shadow-dark:   rgba(0, 0, 0, 0.75);

  /* === Cloud Visuals === */
  --cloud-leader-line-color: #48cae4;
  --cloud-leader-line-opacity: 0.90;
  --cloud-leader-line-width: 1.0;
  --cloud-label-border-color: rgba(0, 180, 216, 0.40);
  --cloud-label-border-width: 1px;
  --cloud-leader-shadow-color: rgba(0, 0, 0, 0.60);
  --cloud-leader-shadow-opacity: 0.60;
  --cloud-leader-shadow-width-extra: 1.25;
  --cloud-leader-shadow-translate-x: 1.0;
  --cloud-leader-shadow-translate-y: 1.8;
  --cloud-leader-shadow-blur: 1.4;

  /* === Paginator === */
  --paginator-bg:     var(--section-bg-color);
  --paginator-text:   var(--text-primary);
  --paginator-border: var(--border-light);
  --paginator-hover:  #1a3a58;
}

/* _dark-purple.scss */
.dark-purple-theme {
  /* === Core Backgrounds === */
  --bg-primary:        #0d0715;   /* near-black space purple — body */
  --bg-secondary:      #160e25;   /* deep violet workspace */
  --bg-tertiary:       #1f1535;   /* sidebars/cards — clearly lifted */
  --bg-disabled:       #2c1e48;

  --background-color:  var(--bg-primary);
  --background-hover:  #251b40;
  --card-background:   var(--bg-tertiary);
  --section-bg-color:  var(--bg-secondary);

  /* === Text === */
  --text-primary:   #f0e8ff;   /* near-white lavender — ~15:1 on bg-primary */
  --text-secondary: #d0a8ff;   /* bright violet — ~8:1 */
  --text-tertiary:  #b080e8;   /* vivid purple — ~5:1 */
  --text-muted:     #8860c8;   /* muted purple — ~4.5:1 on bg-tertiary */
  --text-inverse:   #0d0715;
  --text-color:     var(--text-primary);

  /* === Borders === */
  --border-color:  #3a2060;
  --border-light:  #2a1848;
  --border-dark:   #5838a0;
  --contextual-help-panel-border-width: 1px;
  --contextual-help-panel-border-color: var(--border-dark);

  /* === UI Surfaces === */
  --table-hover-bg: #251b40;
  --input-bg:       #160e25;
  --card-bg:        var(--bg-tertiary);
  --toolbar-bg:     var(--bg-secondary);

  /* === Brand === */
  --primary-color:     #9c5ff5;
  --primary-dark:      #7834d8;
  --primary-light:     #b88aff;
  --primary-color-rgb: 156, 95, 245;

  --accent-color:     #b780ff;
  --accent-dark:      #9c5ff5;
  --accent-light:     #d0acff;
  --accent-color-rgb: 183, 128, 255;

  /* === Status (vibrant on dark) === */
  --success-color:      #69f0ae;
  --success-color-dark: #00c060;
  --success-color-rgb:  105, 240, 174;

  --danger-color:      #ff5252;
  --danger-color-dark: #d32f2f;
  --danger-color-rgb:  255, 82, 82;

  --warning-color:      #ffab40;
  --warning-color-dark: #e08020;
  --warning-color-rgb:  255, 171, 64;

  --info-color:      #e040fb;
  --info-color-dark: #b800d8;
  --info-color-rgb:  224, 64, 251;

  /* === Scrollbar === */
  --scrollbar-track-bg:       var(--bg-secondary);
  --scrollbar-thumb-bg:       #9c5ff5;
  --scrollbar-thumb-hover-bg: #b88aff;

  /* === Shadows === */
  --shadow-light:  rgba(0, 0, 0, 0.35);
  --shadow-medium: rgba(0, 0, 0, 0.55);
  --shadow-dark:   rgba(0, 0, 0, 0.75);

  /* === Cloud Visuals === */
  --cloud-leader-line-color: #b88aff;
  --cloud-leader-line-opacity: 0.90;
  --cloud-leader-line-width: 1.0;
  --cloud-label-border-color: rgba(156, 95, 245, 0.40);
  --cloud-label-border-width: 1px;
  --cloud-leader-shadow-color: rgba(0, 0, 0, 0.65);
  --cloud-leader-shadow-opacity: 0.65;
  --cloud-leader-shadow-width-extra: 1.25;
  --cloud-leader-shadow-translate-x: 1.0;
  --cloud-leader-shadow-translate-y: 1.8;
  --cloud-leader-shadow-blur: 1.4;

  /* === Paginator === */
  --paginator-bg:     var(--section-bg-color);
  --paginator-text:   var(--text-primary);
  --paginator-border: var(--border-light);
  --paginator-hover:  #251b40;
}

/* _dark-rose.scss */
.dark-rose-theme {
  /* === Core Backgrounds === */
  --bg-primary:        #150810;   /* near-black plum — body */
  --bg-secondary:      #220d1a;   /* deep rose workspace */
  --bg-tertiary:       #301425;   /* sidebars/cards — clearly lifted */
  --bg-disabled:       #401c30;

  --background-color:  var(--bg-primary);
  --background-hover:  #381828;
  --card-background:   var(--bg-tertiary);
  --section-bg-color:  var(--bg-secondary);

  /* === Text === */
  --text-primary:   #ffe0f4;   /* near-white rose-tinted — ~15:1 on bg-primary */
  --text-secondary: #ffb0d8;   /* bright pink — ~8:1 */
  --text-tertiary:  #ff80b8;   /* vivid rose — ~5:1 */
  --text-muted:     #d85090;   /* muted rose — ~4.5:1 on bg-tertiary */
  --text-inverse:   #150810;
  --text-color:     var(--text-primary);

  /* === Borders === */
  --border-color:  #601840;
  --border-light:  #481030;
  --border-dark:   #902868;
  --contextual-help-panel-border-width: 1px;
  --contextual-help-panel-border-color: var(--border-dark);

  /* === UI Surfaces === */
  --table-hover-bg: #381828;
  --input-bg:       #220d1a;
  --card-bg:        var(--bg-tertiary);
  --toolbar-bg:     var(--bg-secondary);

  /* === Brand === */
  --primary-color:     #ff5faa;
  --primary-dark:      #d83880;
  --primary-light:     #ff80c0;
  --primary-color-rgb: 255, 95, 170;

  --accent-color:     #ff80c0;
  --accent-dark:      #ff5faa;
  --accent-light:     #ffaadd;
  --accent-color-rgb: 255, 128, 192;

  /* === Status (vibrant on dark) === */
  --success-color:      #69f0ae;
  --success-color-dark: #00c060;
  --success-color-rgb:  105, 240, 174;

  --danger-color:      #ff5252;
  --danger-color-dark: #d32f2f;
  --danger-color-rgb:  255, 82, 82;

  --warning-color:      #ffab40;
  --warning-color-dark: #e08020;
  --warning-color-rgb:  255, 171, 64;

  --info-color:      #ff40c0;
  --info-color-dark: #cc1898;
  --info-color-rgb:  255, 64, 192;

  /* === Scrollbar === */
  --scrollbar-track-bg:       var(--bg-secondary);
  --scrollbar-thumb-bg:       #ff5faa;
  --scrollbar-thumb-hover-bg: #ff80c0;

  /* === Shadows === */
  --shadow-light:  rgba(0, 0, 0, 0.35);
  --shadow-medium: rgba(0, 0, 0, 0.55);
  --shadow-dark:   rgba(0, 0, 0, 0.75);

  /* === Cloud Visuals === */
  --cloud-leader-line-color: #ff80c0;
  --cloud-leader-line-opacity: 0.90;
  --cloud-leader-line-width: 1.0;
  --cloud-label-border-color: rgba(255, 95, 170, 0.40);
  --cloud-label-border-width: 1px;
  --cloud-leader-shadow-color: rgba(0, 0, 0, 0.65);
  --cloud-leader-shadow-opacity: 0.65;
  --cloud-leader-shadow-width-extra: 1.25;
  --cloud-leader-shadow-translate-x: 1.0;
  --cloud-leader-shadow-translate-y: 1.8;
  --cloud-leader-shadow-blur: 1.4;

  /* === Paginator === */
  --paginator-bg:     var(--section-bg-color);
  --paginator-text:   var(--text-primary);
  --paginator-border: var(--border-light);
  --paginator-hover:  #381828;
}

/* _dark-slate.scss */
.dark-slate-theme {
  /* === Core Backgrounds === */
  --bg-primary:        #090e18;   /* near-black steel — body */
  --bg-secondary:      #0f1828;   /* dark steel workspace */
  --bg-tertiary:       #162235;   /* sidebars/cards — clearly lifted */
  --bg-disabled:       #1e2e45;

  --background-color:  var(--bg-primary);
  --background-hover:  #1c2d42;
  --card-background:   var(--bg-tertiary);
  --section-bg-color:  var(--bg-secondary);

  /* === Text === */
  --text-primary:   #e8f0ff;   /* near-white blue-tinted — ~16:1 on bg-primary */
  --text-secondary: #a8c8ff;   /* bright cornflower — ~8:1 */
  --text-tertiary:  #78a0e8;   /* vivid periwinkle — ~5:1 */
  --text-muted:     #5078b8;   /* muted cornflower — ~4.5:1 on bg-tertiary */
  --text-inverse:   #090e18;
  --text-color:     var(--text-primary);

  /* === Borders === */
  --border-color:  #203050;
  --border-light:  #182540;
  --border-dark:   #3858a0;
  --contextual-help-panel-border-width: 1px;
  --contextual-help-panel-border-color: var(--border-dark);

  /* === UI Surfaces === */
  --table-hover-bg: #1c2d42;
  --input-bg:       #0f1828;
  --card-bg:        var(--bg-tertiary);
  --toolbar-bg:     var(--bg-secondary);

  /* === Brand === */
  --primary-color:     #5090f0;
  --primary-dark:      #2d68d4;
  --primary-light:     #78aaff;
  --primary-color-rgb: 80, 144, 240;

  --accent-color:     #78aaff;
  --accent-dark:      #5090f0;
  --accent-light:     #a0c4ff;
  --accent-color-rgb: 120, 170, 255;

  /* === Status (vibrant on dark) === */
  --success-color:      #69f0ae;
  --success-color-dark: #00c060;
  --success-color-rgb:  105, 240, 174;

  --danger-color:      #ff5252;
  --danger-color-dark: #d32f2f;
  --danger-color-rgb:  255, 82, 82;

  --warning-color:      #ffab40;
  --warning-color-dark: #e08020;
  --warning-color-rgb:  255, 171, 64;

  --info-color:      #40c4ff;
  --info-color-dark: #0090d4;
  --info-color-rgb:  64, 196, 255;

  /* === Scrollbar === */
  --scrollbar-track-bg:       var(--bg-secondary);
  --scrollbar-thumb-bg:       #5090f0;
  --scrollbar-thumb-hover-bg: #78aaff;

  /* === Shadows === */
  --shadow-light:  rgba(0, 0, 0, 0.35);
  --shadow-medium: rgba(0, 0, 0, 0.55);
  --shadow-dark:   rgba(0, 0, 0, 0.75);

  /* === Cloud Visuals === */
  --cloud-leader-line-color: #78aaff;
  --cloud-leader-line-opacity: 0.90;
  --cloud-leader-line-width: 1.0;
  --cloud-label-border-color: rgba(80, 144, 240, 0.40);
  --cloud-label-border-width: 1px;
  --cloud-leader-shadow-color: rgba(0, 0, 0, 0.65);
  --cloud-leader-shadow-opacity: 0.65;
  --cloud-leader-shadow-width-extra: 1.25;
  --cloud-leader-shadow-translate-x: 1.0;
  --cloud-leader-shadow-translate-y: 1.8;
  --cloud-leader-shadow-blur: 1.4;

  /* === Paginator === */
  --paginator-bg:     var(--section-bg-color);
  --paginator-text:   var(--text-primary);
  --paginator-border: var(--border-light);
  --paginator-hover:  #1c2d42;
}

/* _dark-teal.scss */
.dark-teal-theme {
  /* === Core Backgrounds === */
  --bg-primary:        #051412;   /* near-black teal — body */
  --bg-secondary:      #0a2220;   /* deep teal workspace */
  --bg-tertiary:       #103028;   /* sidebars/cards — clearly lifted */
  --bg-disabled:       #183e34;

  --background-color:  var(--bg-primary);
  --background-hover:  #163830;
  --card-background:   var(--bg-tertiary);
  --section-bg-color:  var(--bg-secondary);

  /* === Text === */
  --text-primary:   #e0fff8;   /* near-white teal-tinted — ~16:1 on bg-primary */
  --text-secondary: #80f5dd;   /* bright aqua — ~9:1 */
  --text-tertiary:  #40d4b5;   /* vivid teal — ~5:1 */
  --text-muted:     #20a888;   /* muted teal — ~4.5:1 on bg-tertiary */
  --text-inverse:   #051412;
  --text-color:     var(--text-primary);

  /* === Borders === */
  --border-color:  #1a5848;
  --border-light:  #124438;
  --border-dark:   #308870;
  --contextual-help-panel-border-width: 1px;
  --contextual-help-panel-border-color: var(--border-dark);

  /* === UI Surfaces === */
  --table-hover-bg: #163830;
  --input-bg:       #0a2220;
  --card-bg:        var(--bg-tertiary);
  --toolbar-bg:     var(--bg-secondary);

  /* === Brand === */
  --primary-color:     #00e5c0;
  --primary-dark:      #00b898;
  --primary-light:     #40ffdc;
  --primary-color-rgb: 0, 229, 192;

  --accent-color:     #00ffd4;
  --accent-dark:      #00d4b0;
  --accent-light:     #60ffe8;
  --accent-color-rgb: 0, 255, 212;

  /* === Status (vibrant on dark) === */
  --success-color:      #69f0ae;
  --success-color-dark: #00c060;
  --success-color-rgb:  105, 240, 174;

  --danger-color:      #ff5252;
  --danger-color-dark: #d32f2f;
  --danger-color-rgb:  255, 82, 82;

  --warning-color:      #ffab40;
  --warning-color-dark: #e08020;
  --warning-color-rgb:  255, 171, 64;

  --info-color:      #40c4ff;
  --info-color-dark: #0090d4;
  --info-color-rgb:  64, 196, 255;

  /* === Scrollbar === */
  --scrollbar-track-bg:       var(--bg-secondary);
  --scrollbar-thumb-bg:       #00e5c0;
  --scrollbar-thumb-hover-bg: #40ffdc;

  /* === Shadows === */
  --shadow-light:  rgba(0, 0, 0, 0.35);
  --shadow-medium: rgba(0, 0, 0, 0.55);
  --shadow-dark:   rgba(0, 0, 0, 0.75);

  /* === Cloud Visuals === */
  --cloud-leader-line-color: #40ffdc;
  --cloud-leader-line-opacity: 0.90;
  --cloud-leader-line-width: 1.0;
  --cloud-label-border-color: rgba(0, 229, 192, 0.40);
  --cloud-label-border-width: 1px;
  --cloud-leader-shadow-color: rgba(0, 0, 0, 0.65);
  --cloud-leader-shadow-opacity: 0.65;
  --cloud-leader-shadow-width-extra: 1.25;
  --cloud-leader-shadow-translate-x: 1.0;
  --cloud-leader-shadow-translate-y: 1.8;
  --cloud-leader-shadow-blur: 1.4;

  /* === Paginator === */
  --paginator-bg:     var(--section-bg-color);
  --paginator-text:   var(--text-primary);
  --paginator-border: var(--border-light);
  --paginator-hover:  #163830;
}

/* _dark.scss */
.dark-theme {
  
  
  --bg-primary: #141414;     
  --bg-secondary: #1f1f1f;   
  --bg-tertiary: #2b2b2b;    
  --bg-disabled: #3a3a3a;
  --background-color: #141414;
  --background-hover: #333333;
  --overlay-scrim: rgba(var(--color-black-rgb), 0.72);
  --card-background: #2b2b2b;

  --section-bg-color: #1f1f1f;

  --text-primary: #ffffff;
  --text-secondary: #e0e0e0;
  --text-tertiary: #b0b0b0;
  --text-muted: #888888;
  --text-inverse: #000000;
  --text-color: #ffffff;

  --border-color: #3d3d3d;
  --border-light: #303030;
  --contextual-help-panel-border-width: 1px;
  --contextual-help-panel-border-color: #5a5a5a;

  
  --table-hover-bg: #333333;
  --input-bg: #262626;
  --card-bg: #2b2b2b;
  --toolbar-bg: #1f1f1f;

  
  --scrollbar-track-bg: #2d2d2d;
  --scrollbar-thumb-bg: var(--primary-color);
  --scrollbar-thumb-hover-bg: var(--primary-light);

  
  --success-color: #20c997;
  --success-color-dark: #17a07a;
  --danger-color: #e74c3c;
  --danger-color-dark: #c0392b;
  --warning-color: #f39c12;
  --warning-color-dark: #d68910;
  --info-color: #3498db;
  --info-color-dark: #2171b5;
  --accent-color: #1a6f6b;
  --accent-dark: #115754;
  --accent-light: #2d8b86;
  --accent-color-rgb: 26, 111, 107;

  
  --cloud-leader-line-color: #ffffff;
  --cloud-leader-line-opacity: 0.8;
  --cloud-leader-line-width: 1.0;
  --cloud-label-border-color: rgba(255, 255, 255, 0.25);
  --cloud-label-border-width: 1px;
  --cloud-leader-shadow-color: rgba(0, 0, 0, 0.6);
  --cloud-leader-shadow-opacity: 0.55;
  --cloud-leader-shadow-width-extra: 1.25;
  --cloud-leader-shadow-translate-x: 1.0;
  --cloud-leader-shadow-translate-y: 1.8;
  --cloud-leader-shadow-blur: 1.4;

  
  --paginator-bg: var(--section-bg-color);
  --paginator-text: var(--text-primary);
  --paginator-border: var(--border-light);
  --paginator-hover: var(--bg-hover, #2d2d2d);
}

/* _grayscale.scss */
.grayscale-theme {
  /* === Core Backgrounds (clear stepped gray layers) === */
  --bg-primary:        #e8e8e8;   /* light gray canvas — clearly not white */
  --bg-secondary:      #c8c8c8;   /* medium gray — sidebars, 30 steps down */
  --bg-tertiary:       #d8d8d8;   /* cards — distinct between primary/secondary */
  --bg-disabled:       #b0b0b0;

  --background-color:  var(--bg-primary);
  --background-hover:  #d0d0d0;
  --card-background:   var(--bg-tertiary);
  --section-bg-color:  #b8b8b8;

  /* === Text (pure grays, WCAG compliant) === */
  --text-primary:   #0a0a0a;   /* near-black — ~17:1 on bg-primary */
  --text-secondary: #202020;   /* dark gray — ~12:1 */
  --text-tertiary:  #303030;   /* medium-dark — ~9:1 */
  --text-muted:     #484848;   /* ~5:1 on bg-secondary */
  --text-inverse:   #e8e8e8;
  --text-color:     var(--text-primary);

  /* === Borders === */
  --border-color:  #909090;
  --border-light:  #a8a8a8;
  --border-dark:   #6a6a6a;
  --contextual-help-panel-border-width: 1px;
  --contextual-help-panel-border-color: var(--border-dark);

  /* === UI Surfaces === */
  --table-hover-bg: #d0d0d0;
  --input-bg:       #f0f0f0;
  --card-bg:        var(--bg-tertiary);
  --toolbar-bg:     var(--bg-secondary);

  /* === Brand (grays only) === */
  --primary-color:     #484848;
  --primary-dark:      #303030;
  --primary-light:     #606060;
  --primary-color-rgb: 72, 72, 72;

  --accent-color:     #606060;
  --accent-dark:      #484848;
  --accent-light:     #787878;
  --accent-color-rgb: 96, 96, 96;

  /* === Status (differentiated by lightness/value only, no hue) === */
  --success-color:      #383838;   /* darkest — distinguishable by intensity */
  --success-color-dark: #202020;
  --success-color-rgb:  56, 56, 56;

  --danger-color:      #1a1a1a;   /* near-black for highest urgency */
  --danger-color-dark: #000000;
  --danger-color-rgb:  26, 26, 26;

  --warning-color:      #585858;   /* medium-dark */
  --warning-color-dark: #404040;
  --warning-color-rgb:  88, 88, 88;

  --info-color:      #707070;   /* medium */
  --info-color-dark: #585858;
  --info-color-rgb:  112, 112, 112;

  /* === Scrollbar === */
  --scrollbar-track-bg:       var(--bg-secondary);
  --scrollbar-thumb-bg:       #484848;
  --scrollbar-thumb-hover-bg: #606060;

  /* === Shadows === */
  --shadow-light:  rgba(0, 0, 0, 0.10);
  --shadow-medium: rgba(0, 0, 0, 0.20);
  --shadow-dark:   rgba(0, 0, 0, 0.35);

  /* === Cloud Visuals === */
  --cloud-leader-line-color: #303030;
  --cloud-leader-line-opacity: 0.90;
  --cloud-leader-line-width: 1.0;
  --cloud-label-border-color: rgba(48, 48, 48, 0.40);
  --cloud-label-border-width: 1px;
  --cloud-leader-shadow-color: rgba(0, 0, 0, 0.30);
  --cloud-leader-shadow-opacity: 0.30;
  --cloud-leader-shadow-width-extra: 1.25;
  --cloud-leader-shadow-translate-x: 1.0;
  --cloud-leader-shadow-translate-y: 1.8;
  --cloud-leader-shadow-blur: 1.4;

  /* === Paginator === */
  --paginator-bg:     var(--section-bg-color);
  --paginator-text:   var(--text-primary);
  --paginator-border: var(--border-light);
  --paginator-hover:  #d0d0d0;
}

/* _high-contrast-dark-amber.scss */
.high-contrast-dark-amber-theme {
  /* === Core Backgrounds (pure black layers — maximum contrast) === */
  --bg-primary:        #000000;   /* pure black */
  --bg-secondary:      #0c0c0c;   /* near-black workspace */
  --bg-tertiary:       #181818;   /* sidebars/cards — clearly lifted */
  --bg-disabled:       #303030;

  --background-color:  var(--bg-primary);
  --background-hover:  #1e1e1e;
  --card-background:   var(--bg-tertiary);
  --section-bg-color:  #0c0c0c;

  /* === Text (AAA 7:1+ — white on black) === */
  --text-primary:   #ffffff;   /* pure white — 21:1 on black */
  --text-secondary: #f0f0f0;   /* near-white */
  --text-tertiary:  #e0e0e0;   /* light gray */
  --text-muted:     #cccccc;   /* ~13:1 on black — well above AAA */
  --text-inverse:   #000000;
  --text-color:     var(--text-primary);

  /* === Borders (highly visible) === */
  --border-color:  #ffffff;
  --border-light:  #e0a040;   /* amber tint for softer inner borders */
  --border-dark:   #ffffff;
  --contextual-help-panel-border-width: 2px;
  --contextual-help-panel-border-color: var(--border-dark);

  /* === UI Surfaces === */
  --table-hover-bg: #1e1e1e;
  --input-bg:       #181818;
  --card-bg:        var(--bg-tertiary);
  --toolbar-bg:     #000000;

  /* === Brand (amber/gold — no red/green confusion) === */
  --primary-color:     #ffc300;   /* vivid amber — blazing on black */
  --primary-dark:      #e09000;
  --primary-light:     #ffd84d;
  --primary-color-rgb: 255, 195, 0;

  --accent-color:     #ff9900;
  --accent-dark:      #cc7700;
  --accent-light:     #ffbb44;
  --accent-color-rgb: 255, 153, 0;

  /* === Status (color-blind safe: uses orange for danger, cyan for info) === */
  --success-color:      #ffffff;   /* white — rely on shape/label, not just green */
  --success-color-dark: #e0e0e0;
  --success-color-rgb:  255, 255, 255;

  --danger-color:      #ff6600;   /* vivid orange — distinguishable without red-green */
  --danger-color-dark: #cc4400;
  --danger-color-rgb:  255, 102, 0;

  --warning-color:      #ffd700;   /* pure gold */
  --warning-color-dark: #ccaa00;
  --warning-color-rgb:  255, 215, 0;

  --info-color:      #00ccff;   /* vivid cyan — no red/green confusion */
  --info-color-dark: #00aacc;
  --info-color-rgb:  0, 204, 255;

  /* === Scrollbar === */
  --scrollbar-track-bg:       #181818;
  --scrollbar-thumb-bg:       #ffc300;
  --scrollbar-thumb-hover-bg: #ffd84d;

  /* === Shadows (white-tinted for dark HC) === */
  --shadow-light:  rgba(255, 255, 255, 0.10);
  --shadow-medium: rgba(255, 255, 255, 0.15);
  --shadow-dark:   rgba(255, 255, 255, 0.25);
  --shadow-sm:     0 0 0 2px #ffffff;
  --shadow-md:     0 0 0 3px #ffffff;

  /* === Cloud Visuals === */
  --cloud-leader-line-color: #ffc300;
  --cloud-leader-line-opacity: 1.0;
  --cloud-leader-line-width: 1.5;
  --cloud-label-border-color: rgba(255, 195, 0, 0.60);
  --cloud-label-border-width: 2px;
  --cloud-leader-shadow-color: rgba(0, 0, 0, 0.80);
  --cloud-leader-shadow-opacity: 0.80;
  --cloud-leader-shadow-width-extra: 1.25;
  --cloud-leader-shadow-translate-x: 1.0;
  --cloud-leader-shadow-translate-y: 1.8;
  --cloud-leader-shadow-blur: 1.4;

  /* === Paginator === */
  --paginator-bg:     #181818;
  --paginator-text:   #ffffff;
  --paginator-border: #ffffff;
  --paginator-hover:  #1e1e1e;
}

/* _high-contrast-dark-blue.scss */
.high-contrast-dark-blue-theme {
  /* === Core Backgrounds (pure black layers) === */
  --bg-primary:        #000000;   /* pure black */
  --bg-secondary:      #080c10;   /* near-black with blue cast */
  --bg-tertiary:       #101820;   /* sidebars/cards — clearly lifted */
  --bg-disabled:       #202a34;

  --background-color:  var(--bg-primary);
  --background-hover:  #181e28;
  --card-background:   var(--bg-tertiary);
  --section-bg-color:  #080c10;

  /* === Text (AAA 7:1+ — white on black) === */
  --text-primary:   #ffffff;   /* pure white — 21:1 on black */
  --text-secondary: #f0f5ff;   /* near-white blue cast */
  --text-tertiary:  #e0eaff;   /* light blue-white */
  --text-muted:     #c8d8f8;   /* light periwinkle — ~13:1 on black */
  --text-inverse:   #000000;
  --text-color:     var(--text-primary);

  /* === Borders (highly visible) === */
  --border-color:  #ffffff;
  --border-light:  #4488ff;   /* blue tint for softer inner borders */
  --border-dark:   #ffffff;
  --contextual-help-panel-border-width: 2px;
  --contextual-help-panel-border-color: var(--border-dark);

  /* === UI Surfaces === */
  --table-hover-bg: #181e28;
  --input-bg:       #101820;
  --card-bg:        var(--bg-tertiary);
  --toolbar-bg:     #000000;

  /* === Brand (vivid cyan — no blue-yellow confusion for tritanopes) === */
  --primary-color:     #00ffff;   /* pure cyan — maximum visibility */
  --primary-dark:      #00cccc;
  --primary-light:     #66ffff;
  --primary-color-rgb: 0, 255, 255;

  --accent-color:     #ff00ff;   /* magenta — appears as bright pink/red to tritanopes */
  --accent-dark:      #cc00cc;
  --accent-light:     #ff66ff;
  --accent-color-rgb: 255, 0, 255;

  /* === Status (tritanopia-safe: uses intensity/saturation differences) === */
  --success-color:      #00ff88;   /* bright green — safe (tritanopes see green) */
  --success-color-dark: #00cc66;
  --success-color-rgb:  0, 255, 136;

  --danger-color:      #ff0000;   /* pure red — safe (tritanopes see red) */
  --danger-color-dark: #cc0000;
  --danger-color-rgb:  255, 0, 0;

  --warning-color:      #ff8800;   /* orange — distinct from red and green */
  --warning-color-dark: #cc6600;
  --warning-color-rgb:  255, 136, 0;

  --info-color:      #00ffff;   /* cyan — matches primary */
  --info-color-dark: #00cccc;
  --info-color-rgb:  0, 255, 255;

  /* === Scrollbar === */
  --scrollbar-track-bg:       #101820;
  --scrollbar-thumb-bg:       #00ffff;
  --scrollbar-thumb-hover-bg: #66ffff;

  /* === Shadows (white-tinted for dark HC) === */
  --shadow-light:  rgba(255, 255, 255, 0.10);
  --shadow-medium: rgba(255, 255, 255, 0.15);
  --shadow-dark:   rgba(255, 255, 255, 0.25);
  --shadow-sm:     0 0 0 2px #ffffff;
  --shadow-md:     0 0 0 3px #ffffff;

  /* === Cloud Visuals === */
  --cloud-leader-line-color: #00ffff;
  --cloud-leader-line-opacity: 1.0;
  --cloud-leader-line-width: 1.5;
  --cloud-label-border-color: rgba(0, 255, 255, 0.70);
  --cloud-label-border-width: 2px;
  --cloud-leader-shadow-color: rgba(0, 0, 0, 0.80);
  --cloud-leader-shadow-opacity: 0.80;
  --cloud-leader-shadow-width-extra: 1.25;
  --cloud-leader-shadow-translate-x: 1.0;
  --cloud-leader-shadow-translate-y: 1.8;
  --cloud-leader-shadow-blur: 1.4;

  /* === Paginator === */
  --paginator-bg:     #101820;
  --paginator-text:   #ffffff;
  --paginator-border: #ffffff;
  --paginator-hover:  #181e28;
}

/* _high-contrast-dark.scss */
.high-contrast-dark-theme {
  --bg-primary: #000000;
  --bg-secondary: #0a0a0a;
  --bg-tertiary: #1a1a1a;
  --bg-disabled: #333333;
  --background-color: #000000;
  --background-hover: #1a1a1a;
  --card-background: #111111;

  --section-bg-color: #0d0d0d;

  --text-primary: #ffffff;
  --text-secondary: #e0e0e0;
  --text-tertiary: #cccccc;
  --text-muted: #aaaaaa;
  --text-inverse: #000000;
  --text-color: #ffffff;

  --border-color: #ffffff;
  --border-light: #cccccc;
  --border-dark: #ffffff;
  --contextual-help-panel-border-width: 2px;
  --contextual-help-panel-border-color: var(--border-dark);

  --table-hover-bg: #1a1a1a;
  --input-bg: #111111;
  --card-bg: #111111;
  --toolbar-bg: #000000;

  --shadow-light: rgba(255, 255, 255, 0.1);
  --shadow-medium: rgba(255, 255, 255, 0.15);
  --shadow-dark: rgba(255, 255, 255, 0.25);
  --shadow-sm: 0 0 0 1px #ffffff;
  --shadow-md: 0 0 0 2px #ffffff;

  --scrollbar-track-bg: #111111;
  --scrollbar-thumb-bg: #ffffff;
  --scrollbar-thumb-hover-bg: #cccccc;

  --success-color: #00ff88;
  --success-color-dark: #00cc6a;
  --danger-color: #ff4444;
  --danger-color-dark: #cc0000;
  --warning-color: #ffcc00;
  --warning-color-dark: #cc9900;
  --info-color: #44aaff;
  --info-color-dark: #0066cc;

  --primary-color: #7c9eff;
  --primary-dark: #5577cc;
  --primary-light: #a0bcff;
  --accent-color: #5ce1ff;
  --accent-color-rgb: 92, 225, 255;

  --paginator-bg: #111111;
  --paginator-text: #ffffff;
  --paginator-border: #ffffff;
  --paginator-hover: #1a1a1a;
}

/* _high-contrast-light-amber.scss */
.high-contrast-light-amber-theme {
  /* === Core Backgrounds (warm-tinted, no blue dependency) === */
  --bg-primary:        #ffffff;   /* pure white — maximum brightness */
  --bg-secondary:      #f5f0e0;   /* warm cream — strong distinction */
  --bg-tertiary:       #faf7ee;   /* cards — warm white */
  --bg-disabled:       #e8e0c8;

  --background-color:  var(--bg-primary);
  --background-hover:  #f0e8d0;
  --card-background:   var(--bg-tertiary);
  --section-bg-color:  #f0d870;

  /* === Text (AAA 7:1+ on all surfaces) === */
  --text-primary:   #000000;   /* pure black — 21:1 on white */
  --text-secondary: #140800;   /* near-black warm brown */
  --text-tertiary:  #281500;   /* very dark amber-brown */
  --text-muted:     #3c2000;   /* dark brown — 10:1+ on bg-primary */
  --text-inverse:   #ffffff;
  --text-color:     var(--text-primary);

  /* === Borders (strong) === */
  --border-color:  #000000;
  --border-light:  #804000;
  --border-dark:   #000000;
  --contextual-help-panel-border-width: 2px;
  --contextual-help-panel-border-color: var(--border-dark);

  /* === UI Surfaces === */
  --table-hover-bg: #f0e8d0;
  --input-bg:       #ffffff;
  --card-bg:        var(--bg-tertiary);
  --toolbar-bg:     var(--bg-secondary);

  /* === Brand (amber/orange — no blue/purple confusion for tritanopes) === */
  --primary-color:     #8b4000;   /* dark amber-brown — excellent contrast */
  --primary-dark:      #602c00;
  --primary-light:     #b85800;
  --primary-color-rgb: 139, 64, 0;

  --accent-color:     #c86000;
  --accent-dark:      #9a4800;
  --accent-light:     #e07800;
  --accent-color-rgb: 200, 96, 0;

  /* === Status (tritanopia-safe: red and green, no blue-yellow reliance) === */
  --success-color:      #005a00;   /* very dark green — distinguishable */
  --success-color-dark: #004000;
  --success-color-rgb:  0, 90, 0;

  --danger-color:      #880000;   /* very dark red */
  --danger-color-dark: #600000;
  --danger-color-rgb:  136, 0, 0;

  --warning-color:      #8b4000;   /* dark amber */
  --warning-color-dark: #602c00;
  --warning-color-rgb:  139, 64, 0;

  --info-color:      #603000;   /* dark warm brown — info distinct by intensity */
  --info-color-dark: #402000;
  --info-color-rgb:  96, 48, 0;

  /* === Scrollbar === */
  --scrollbar-track-bg:       var(--bg-secondary);
  --scrollbar-thumb-bg:       #8b4000;
  --scrollbar-thumb-hover-bg: #b85800;

  /* === Shadows === */
  --shadow-light:  rgba(0, 0, 0, 0.20);
  --shadow-medium: rgba(0, 0, 0, 0.40);
  --shadow-dark:   rgba(0, 0, 0, 0.60);
  --shadow-sm:     0 0 0 2px #000000;
  --shadow-md:     0 0 0 3px #000000;

  /* === Cloud Visuals === */
  --cloud-leader-line-color: #8b4000;
  --cloud-leader-line-opacity: 1.0;
  --cloud-leader-line-width: 1.5;
  --cloud-label-border-color: rgba(139, 64, 0, 0.60);
  --cloud-label-border-width: 2px;
  --cloud-leader-shadow-color: rgba(0, 0, 0, 0.40);
  --cloud-leader-shadow-opacity: 0.40;
  --cloud-leader-shadow-width-extra: 1.25;
  --cloud-leader-shadow-translate-x: 1.0;
  --cloud-leader-shadow-translate-y: 1.8;
  --cloud-leader-shadow-blur: 1.4;

  /* === Paginator === */
  --paginator-bg:     var(--section-bg-color);
  --paginator-text:   var(--text-primary);
  --paginator-border: var(--border-color);
  --paginator-hover:  #f0e8d0;
}

/* _high-contrast-light.scss */
.high-contrast-light-theme {
  /* === Core Backgrounds === */
  --bg-primary:        #ffffff;   /* pure white — maximum brightness base */
  --bg-secondary:      #e8eaf5;   /* clearly blue-tinted — strong distinction */
  --bg-tertiary:       #f0f2ff;   /* cards — distinct from primary and secondary */
  --bg-disabled:       #d0d4e8;

  --background-color:  var(--bg-primary);
  --background-hover:  #e0e4f8;
  --card-background:   var(--bg-tertiary);
  --section-bg-color:  #c8d0f0;

  /* === Text (AAA 7:1+ on all surfaces) === */
  --text-primary:   #000000;   /* pure black — 21:1 on white */
  --text-secondary: #0a0a14;   /* near-black blue — still 20:1 */
  --text-tertiary:  #141428;   /* very dark navy */
  --text-muted:     #1e1e40;   /* dark indigo — 12:1+ on bg-primary */
  --text-inverse:   #ffffff;
  --text-color:     var(--text-primary);

  /* === Borders (strong and visible) === */
  --border-color:  #000000;
  --border-light:  #3030a0;
  --border-dark:   #000000;
  --contextual-help-panel-border-width: 2px;
  --contextual-help-panel-border-color: var(--border-dark);

  /* === UI Surfaces === */
  --table-hover-bg: #e0e4f8;
  --input-bg:       #ffffff;
  --card-bg:        var(--bg-tertiary);
  --toolbar-bg:     var(--bg-secondary);

  /* === Brand (deep blue — no red/green confusion) === */
  --primary-color:     #0000b0;   /* deep royal blue */
  --primary-dark:      #00007a;
  --primary-light:     #2222d0;
  --primary-color-rgb: 0, 0, 176;

  --accent-color:     #0033cc;
  --accent-dark:      #001899;
  --accent-light:     #2255ee;
  --accent-color-rgb: 0, 51, 204;

  /* === Status (color-blind safe: orange not red, blue not green) === */
  --success-color:      #005a00;   /* very dark green — distinguishable by lightness */
  --success-color-dark: #004000;
  --success-color-rgb:  0, 90, 0;

  --danger-color:      #c04800;   /* strong orange-red — visible without red-green */
  --danger-color-dark: #8a3000;
  --danger-color-rgb:  192, 72, 0;

  --warning-color:      #806000;   /* dark gold — distinguishable */
  --warning-color-dark: #604400;
  --warning-color-rgb:  128, 96, 0;

  --info-color:      #0000b0;
  --info-color-dark: #00007a;
  --info-color-rgb:  0, 0, 176;

  /* === Scrollbar === */
  --scrollbar-track-bg:       var(--bg-secondary);
  --scrollbar-thumb-bg:       #0000b0;
  --scrollbar-thumb-hover-bg: #2222d0;

  /* === Shadows === */
  --shadow-light:  rgba(0, 0, 0, 0.20);
  --shadow-medium: rgba(0, 0, 0, 0.40);
  --shadow-dark:   rgba(0, 0, 0, 0.60);
  --shadow-sm:     0 0 0 2px #000000;
  --shadow-md:     0 0 0 3px #000000;

  /* === Cloud Visuals === */
  --cloud-leader-line-color: #0000b0;
  --cloud-leader-line-opacity: 1.0;
  --cloud-leader-line-width: 1.5;
  --cloud-label-border-color: rgba(0, 0, 176, 0.60);
  --cloud-label-border-width: 2px;
  --cloud-leader-shadow-color: rgba(0, 0, 0, 0.40);
  --cloud-leader-shadow-opacity: 0.40;
  --cloud-leader-shadow-width-extra: 1.25;
  --cloud-leader-shadow-translate-x: 1.0;
  --cloud-leader-shadow-translate-y: 1.8;
  --cloud-leader-shadow-blur: 1.4;

  /* === Paginator === */
  --paginator-bg:     var(--section-bg-color);
  --paginator-text:   var(--text-primary);
  --paginator-border: var(--border-color);
  --paginator-hover:  #e0e4f8;
}

/* _light-amber.scss */
.light-amber-theme {
  /* === Core Backgrounds === */
  --bg-primary:        #faf4e6;   /* warmest cream — main canvas */
  --bg-secondary:      #f0e0b8;   /* golden sidebars — clearly deeper */
  --bg-tertiary:       #f5e8cc;   /* card surfaces — between */
  --bg-disabled:       #e0cc98;

  --background-color:  var(--bg-primary);
  --background-hover:  #f5ead0;
  --card-background:   var(--bg-tertiary);
  --section-bg-color:  #f5d070;

  /* === Text === */
  --text-primary:   #1c1005;   /* near-black warm brown — ~17:1 on bg-primary */
  --text-secondary: #3d2208;   /* deep amber-brown — ~10:1 */
  --text-tertiary:  #5c3510;   /* medium warm brown */
  --text-muted:     #7a4a18;   /* ~5:1 on bg-secondary */
  --text-inverse:   #faf4e6;
  --text-color:     var(--text-primary);

  /* === Borders === */
  --border-color:  #c89848;
  --border-light:  #dab870;
  --border-dark:   #a07828;
  --contextual-help-panel-border-width: 1px;
  --contextual-help-panel-border-color: var(--border-dark);

  /* === UI Surfaces === */
  --table-hover-bg: #f5ead0;
  --input-bg:       #fffbf0;
  --card-bg:        var(--bg-tertiary);
  --toolbar-bg:     var(--bg-secondary);

  /* === Brand === */
  --primary-color:     #d4820a;
  --primary-dark:      #a06008;
  --primary-light:     #f0a830;
  --primary-color-rgb: 212, 130, 10;

  --accent-color:     #e8960c;
  --accent-dark:      #b87008;
  --accent-light:     #f5b840;
  --accent-color-rgb: 232, 150, 12;

  /* === Status === */
  --success-color:      #1a7a34;
  --success-color-dark: #135c27;
  --success-color-rgb:  26, 122, 52;

  --danger-color:      #b83020;
  --danger-color-dark: #8a2018;
  --danger-color-rgb:  184, 48, 32;

  --warning-color:      #a05000;
  --warning-color-dark: #783c00;
  --warning-color-rgb:  160, 80, 0;

  --info-color:      #0d65a8;
  --info-color-dark: #0a4d80;
  --info-color-rgb:  13, 101, 168;

  /* === Scrollbar === */
  --scrollbar-track-bg:       var(--bg-secondary);
  --scrollbar-thumb-bg:       #d4820a;
  --scrollbar-thumb-hover-bg: #a06008;

  /* === Shadows === */
  --shadow-light:  rgba(80, 40, 0, 0.08);
  --shadow-medium: rgba(80, 40, 0, 0.16);
  --shadow-dark:   rgba(80, 40, 0, 0.28);

  /* === Cloud Visuals === */
  --cloud-leader-line-color: #d4820a;
  --cloud-leader-line-opacity: 0.90;
  --cloud-leader-line-width: 1.0;
  --cloud-label-border-color: rgba(212, 130, 10, 0.40);
  --cloud-label-border-width: 1px;
  --cloud-leader-shadow-color: rgba(0, 0, 0, 0.28);
  --cloud-leader-shadow-opacity: 0.28;
  --cloud-leader-shadow-width-extra: 1.25;
  --cloud-leader-shadow-translate-x: 1.0;
  --cloud-leader-shadow-translate-y: 1.8;
  --cloud-leader-shadow-blur: 1.4;

  /* === Paginator === */
  --paginator-bg:     var(--section-bg-color);
  --paginator-text:   var(--text-primary);
  --paginator-border: var(--border-light);
  --paginator-hover:  #f5ead0;
}

/* _light-cherry.scss */
.light-cherry-theme {
  /* === Core Backgrounds === */
  --bg-primary:        #faf0f2;   /* softest rose-white — main canvas */
  --bg-secondary:      #f0cdd5;   /* deep warm rose — sidebars */
  --bg-tertiary:       #f7dde3;   /* cards — between */
  --bg-disabled:       #ddb5be;

  --background-color:  var(--bg-primary);
  --background-hover:  #f4dde2;
  --card-background:   var(--bg-tertiary);
  --section-bg-color:  #e8b5c0;

  /* === Text === */
  --text-primary:   #1a0307;   /* near-black cherry — ~17:1 on bg-primary */
  --text-secondary: #48090f;   /* deep cherry — ~10:1 */
  --text-tertiary:  #6e1522;   /* medium cherry */
  --text-muted:     #8a2535;   /* ~5:1 on bg-secondary */
  --text-inverse:   #faf0f2;
  --text-color:     var(--text-primary);

  /* === Borders === */
  --border-color:  #d0808c;
  --border-light:  #e0a0ac;
  --border-dark:   #b05060;
  --contextual-help-panel-border-width: 1px;
  --contextual-help-panel-border-color: var(--border-dark);

  /* === UI Surfaces === */
  --table-hover-bg: #f4dde2;
  --input-bg:       #fef8f9;
  --card-bg:        var(--bg-tertiary);
  --toolbar-bg:     var(--bg-secondary);

  /* === Brand === */
  --primary-color:     #c0392b;
  --primary-dark:      #922b21;
  --primary-light:     #e05a4e;
  --primary-color-rgb: 192, 57, 43;

  --accent-color:     #e74c3c;
  --accent-dark:      #c0392b;
  --accent-light:     #f1948a;
  --accent-color-rgb: 231, 76, 60;

  /* === Status === */
  --success-color:      #1a7a34;
  --success-color-dark: #135c27;
  --success-color-rgb:  26, 122, 52;

  --danger-color:      #7b0000;
  --danger-color-dark: #550000;
  --danger-color-rgb:  123, 0, 0;

  --warning-color:      #b86000;
  --warning-color-dark: #8a4800;
  --warning-color-rgb:  184, 96, 0;

  --info-color:      #0d65a8;
  --info-color-dark: #0a4d80;
  --info-color-rgb:  13, 101, 168;

  /* === Scrollbar === */
  --scrollbar-track-bg:       var(--bg-secondary);
  --scrollbar-thumb-bg:       #c0392b;
  --scrollbar-thumb-hover-bg: #922b21;

  /* === Shadows === */
  --shadow-light:  rgba(80, 0, 10, 0.08);
  --shadow-medium: rgba(80, 0, 10, 0.16);
  --shadow-dark:   rgba(80, 0, 10, 0.28);

  /* === Cloud Visuals === */
  --cloud-leader-line-color: #c0392b;
  --cloud-leader-line-opacity: 0.90;
  --cloud-leader-line-width: 1.0;
  --cloud-label-border-color: rgba(192, 57, 43, 0.40);
  --cloud-label-border-width: 1px;
  --cloud-leader-shadow-color: rgba(0, 0, 0, 0.28);
  --cloud-leader-shadow-opacity: 0.28;
  --cloud-leader-shadow-width-extra: 1.25;
  --cloud-leader-shadow-translate-x: 1.0;
  --cloud-leader-shadow-translate-y: 1.8;
  --cloud-leader-shadow-blur: 1.4;

  /* === Paginator === */
  --paginator-bg:     var(--section-bg-color);
  --paginator-text:   var(--text-primary);
  --paginator-border: var(--border-light);
  --paginator-hover:  #f4dde2;
}

/* _light-coral.scss */
.light-coral-theme {
  /* === Core Backgrounds === */
  --bg-primary:        #faf2ec;   /* warmest peach-white — main canvas */
  --bg-secondary:      #f0d5c0;   /* warm coral — sidebars */
  --bg-tertiary:       #f7e3d0;   /* cards — between */
  --bg-disabled:       #e0c0a0;

  --background-color:  var(--bg-primary);
  --background-hover:  #f5e0cc;
  --card-background:   var(--bg-tertiary);
  --section-bg-color:  #f5b890;

  /* === Text === */
  --text-primary:   #1e0d05;   /* near-black burnt sienna — ~17:1 on bg-primary */
  --text-secondary: #452015;   /* deep brick — ~10:1 */
  --text-tertiary:  #633020;   /* medium terracotta */
  --text-muted:     #7d402e;   /* ~5:1 on bg-secondary */
  --text-inverse:   #faf2ec;
  --text-color:     var(--text-primary);

  /* === Borders === */
  --border-color:  #d09070;
  --border-light:  #e0b090;
  --border-dark:   #b07050;
  --contextual-help-panel-border-width: 1px;
  --contextual-help-panel-border-color: var(--border-dark);

  /* === UI Surfaces === */
  --table-hover-bg: #f5e0cc;
  --input-bg:       #fefaf7;
  --card-bg:        var(--bg-tertiary);
  --toolbar-bg:     var(--bg-secondary);

  /* === Brand === */
  --primary-color:     #d95e30;
  --primary-dark:      #a84420;
  --primary-light:     #f08050;
  --primary-color-rgb: 217, 94, 48;

  --accent-color:     #e07830;
  --accent-dark:      #b05c20;
  --accent-light:     #f5a060;
  --accent-color-rgb: 224, 120, 48;

  /* === Status === */
  --success-color:      #1a7a34;
  --success-color-dark: #135c27;
  --success-color-rgb:  26, 122, 52;

  --danger-color:      #b02020;
  --danger-color-dark: #801818;
  --danger-color-rgb:  176, 32, 32;

  --warning-color:      #985000;
  --warning-color-dark: #703c00;
  --warning-color-rgb:  152, 80, 0;

  --info-color:      #0d65a8;
  --info-color-dark: #0a4d80;
  --info-color-rgb:  13, 101, 168;

  /* === Scrollbar === */
  --scrollbar-track-bg:       var(--bg-secondary);
  --scrollbar-thumb-bg:       #d95e30;
  --scrollbar-thumb-hover-bg: #a84420;

  /* === Shadows === */
  --shadow-light:  rgba(100, 30, 0, 0.08);
  --shadow-medium: rgba(100, 30, 0, 0.16);
  --shadow-dark:   rgba(100, 30, 0, 0.28);

  /* === Cloud Visuals === */
  --cloud-leader-line-color: #d95e30;
  --cloud-leader-line-opacity: 0.90;
  --cloud-leader-line-width: 1.0;
  --cloud-label-border-color: rgba(217, 94, 48, 0.40);
  --cloud-label-border-width: 1px;
  --cloud-leader-shadow-color: rgba(0, 0, 0, 0.28);
  --cloud-leader-shadow-opacity: 0.28;
  --cloud-leader-shadow-width-extra: 1.25;
  --cloud-leader-shadow-translate-x: 1.0;
  --cloud-leader-shadow-translate-y: 1.8;
  --cloud-leader-shadow-blur: 1.4;

  /* === Paginator === */
  --paginator-bg:     var(--section-bg-color);
  --paginator-text:   var(--text-primary);
  --paginator-border: var(--border-light);
  --paginator-hover:  #f5e0cc;
}

/* _light-lavender.scss */
.light-lavender-theme {
  /* === Core Backgrounds === */
  --bg-primary:        #f4effc;   /* palest lavender — main canvas */
  --bg-secondary:      #ddd0f5;   /* deeper violet — sidebars */
  --bg-tertiary:       #ece3f8;   /* cards — between */
  --bg-disabled:       #c8b8e8;

  --background-color:  var(--bg-primary);
  --background-hover:  #e8dff8;
  --card-background:   var(--bg-tertiary);
  --section-bg-color:  #c8b0e8;

  /* === Text === */
  --text-primary:   #160d28;   /* near-black violet — ~17:1 on bg-primary */
  --text-secondary: #341560;   /* deep purple — ~10:1 */
  --text-tertiary:  #502080;   /* vibrant purple */
  --text-muted:     #683898;   /* ~5:1 on bg-secondary */
  --text-inverse:   #f4effc;
  --text-color:     var(--text-primary);

  /* === Borders === */
  --border-color:  #a880d8;
  --border-light:  #c0a0e8;
  --border-dark:   #8860b8;
  --contextual-help-panel-border-width: 1px;
  --contextual-help-panel-border-color: var(--border-dark);

  /* === UI Surfaces === */
  --table-hover-bg: #e8dff8;
  --input-bg:       #faf7ff;
  --card-bg:        var(--bg-tertiary);
  --toolbar-bg:     var(--bg-secondary);

  /* === Brand === */
  --primary-color:     #7c3aed;
  --primary-dark:      #5b21b6;
  --primary-light:     #a855f7;
  --primary-color-rgb: 124, 58, 237;

  --accent-color:     #9f5af0;
  --accent-dark:      #7c3aed;
  --accent-light:     #c084fc;
  --accent-color-rgb: 159, 90, 240;

  /* === Status === */
  --success-color:      #1a7a34;
  --success-color-dark: #135c27;
  --success-color-rgb:  26, 122, 52;

  --danger-color:      #b83030;
  --danger-color-dark: #8a2020;
  --danger-color-rgb:  184, 48, 48;

  --warning-color:      #9a5800;
  --warning-color-dark: #784400;
  --warning-color-rgb:  154, 88, 0;

  --info-color:      #2563eb;
  --info-color-dark: #1d4ed8;
  --info-color-rgb:  37, 99, 235;

  /* === Scrollbar === */
  --scrollbar-track-bg:       var(--bg-secondary);
  --scrollbar-thumb-bg:       #7c3aed;
  --scrollbar-thumb-hover-bg: #5b21b6;

  /* === Shadows === */
  --shadow-light:  rgba(50, 0, 100, 0.08);
  --shadow-medium: rgba(50, 0, 100, 0.16);
  --shadow-dark:   rgba(50, 0, 100, 0.28);

  /* === Cloud Visuals === */
  --cloud-leader-line-color: #7c3aed;
  --cloud-leader-line-opacity: 0.90;
  --cloud-leader-line-width: 1.0;
  --cloud-label-border-color: rgba(124, 58, 237, 0.40);
  --cloud-label-border-width: 1px;
  --cloud-leader-shadow-color: rgba(0, 0, 0, 0.28);
  --cloud-leader-shadow-opacity: 0.28;
  --cloud-leader-shadow-width-extra: 1.25;
  --cloud-leader-shadow-translate-x: 1.0;
  --cloud-leader-shadow-translate-y: 1.8;
  --cloud-leader-shadow-blur: 1.4;

  /* === Paginator === */
  --paginator-bg:     var(--section-bg-color);
  --paginator-text:   var(--text-primary);
  --paginator-border: var(--border-light);
  --paginator-hover:  #e8dff8;
}

/* _light-ocean.scss */
.light-ocean-theme {
  /* === Core Backgrounds === */
  --bg-primary:        #edf5fb;   /* lightest — main content canvas */
  --bg-secondary:      #cee8f5;   /* sidebars/sections — 30+ steps deeper */
  --bg-tertiary:       #ddf0f8;   /* cards — distinct between primary and secondary */
  --bg-disabled:       #b5d5e8;

  --background-color:  var(--bg-primary);
  --background-hover:  #d5ecf8;
  --card-background:   var(--bg-tertiary);
  --section-bg-color:  #a8d8f0;

  /* === Text (all hit 4.5:1+ on every surface) === */
  --text-primary:   #061525;   /* near-black navy — ~17:1 on bg-primary */
  --text-secondary: #102f50;   /* deep ocean — ~10:1 */
  --text-tertiary:  #1e4d72;   /* ocean blue */
  --text-muted:     #2d6285;   /* ~5:1 on bg-secondary */
  --text-inverse:   #edf5fb;
  --text-color:     var(--text-primary);

  /* === Borders === */
  --border-color:  #78b8d8;
  --border-light:  #98cce8;
  --border-dark:   #4a90b5;
  --contextual-help-panel-border-width: 1px;
  --contextual-help-panel-border-color: var(--border-dark);

  /* === UI Surfaces === */
  --table-hover-bg: #d5ecf8;
  --input-bg:       #f5faff;
  --card-bg:        var(--bg-tertiary);
  --toolbar-bg:     var(--bg-secondary);

  /* === Brand === */
  --primary-color:     #0077b6;
  --primary-dark:      #005580;
  --primary-light:     #3399cc;
  --primary-color-rgb: 0, 119, 182;

  --accent-color:     #00b4d8;
  --accent-dark:      #0090b0;
  --accent-light:     #48cae4;
  --accent-color-rgb: 0, 180, 216;

  /* === Status === */
  --success-color:      #1a7a34;
  --success-color-dark: #135c27;
  --success-color-rgb:  26, 122, 52;

  --danger-color:      #c0392b;
  --danger-color-dark: #8e1c1c;
  --danger-color-rgb:  192, 57, 43;

  --warning-color:      #c05c00;
  --warning-color-dark: #9a4400;
  --warning-color-rgb:  192, 92, 0;

  --info-color:      #0077b6;
  --info-color-dark: #005580;
  --info-color-rgb:  0, 119, 182;

  /* === Scrollbar === */
  --scrollbar-track-bg:       var(--bg-secondary);
  --scrollbar-thumb-bg:       #0077b6;
  --scrollbar-thumb-hover-bg: #005580;

  /* === Shadows === */
  --shadow-light:  rgba(0, 40, 80, 0.08);
  --shadow-medium: rgba(0, 40, 80, 0.16);
  --shadow-dark:   rgba(0, 40, 80, 0.28);

  /* === Cloud Visuals === */
  --cloud-leader-line-color: #0077b6;
  --cloud-leader-line-opacity: 0.90;
  --cloud-leader-line-width: 1.0;
  --cloud-label-border-color: rgba(0, 119, 182, 0.40);
  --cloud-label-border-width: 1px;
  --cloud-leader-shadow-color: rgba(0, 0, 0, 0.28);
  --cloud-leader-shadow-opacity: 0.28;
  --cloud-leader-shadow-width-extra: 1.25;
  --cloud-leader-shadow-translate-x: 1.0;
  --cloud-leader-shadow-translate-y: 1.8;
  --cloud-leader-shadow-blur: 1.4;

  /* === Paginator === */
  --paginator-bg:     var(--section-bg-color);
  --paginator-text:   var(--text-primary);
  --paginator-border: var(--border-light);
  --paginator-hover:  #d5ecf8;
}

/* _light-rose.scss */
.light-rose-theme {
  /* === Core Backgrounds === */
  --bg-primary:        #faf0f6;   /* palest blush — main canvas */
  --bg-secondary:      #f0cce0;   /* deep rose — sidebars */
  --bg-tertiary:       #f7dded;   /* cards — between */
  --bg-disabled:       #ddb0c8;

  --background-color:  var(--bg-primary);
  --background-hover:  #f5dcea;
  --card-background:   var(--bg-tertiary);
  --section-bg-color:  #e8b0cc;

  /* === Text === */
  --text-primary:   #1e0815;   /* near-black plum — ~17:1 on bg-primary */
  --text-secondary: #480528;   /* deep rose — ~10:1 */
  --text-tertiary:  #6a1540;   /* medium mauve */
  --text-muted:     #862555;   /* ~5:1 on bg-secondary */
  --text-inverse:   #faf0f6;
  --text-color:     var(--text-primary);

  /* === Borders === */
  --border-color:  #d080a8;
  --border-light:  #e0a0c0;
  --border-dark:   #b05888;
  --contextual-help-panel-border-width: 1px;
  --contextual-help-panel-border-color: var(--border-dark);

  /* === UI Surfaces === */
  --table-hover-bg: #f5dcea;
  --input-bg:       #fef8fc;
  --card-bg:        var(--bg-tertiary);
  --toolbar-bg:     var(--bg-secondary);

  /* === Brand === */
  --primary-color:     #c2185b;
  --primary-dark:      #8d1044;
  --primary-light:     #e91e8c;
  --primary-color-rgb: 194, 24, 91;

  --accent-color:     #e91e63;
  --accent-dark:      #c2185b;
  --accent-light:     #f06292;
  --accent-color-rgb: 233, 30, 99;

  /* === Status === */
  --success-color:      #1a7a34;
  --success-color-dark: #135c27;
  --success-color-rgb:  26, 122, 52;

  --danger-color:      #880030;
  --danger-color-dark: #600020;
  --danger-color-rgb:  136, 0, 48;

  --warning-color:      #9a5500;
  --warning-color-dark: #784200;
  --warning-color-rgb:  154, 85, 0;

  --info-color:      #0d65a8;
  --info-color-dark: #0a4d80;
  --info-color-rgb:  13, 101, 168;

  /* === Scrollbar === */
  --scrollbar-track-bg:       var(--bg-secondary);
  --scrollbar-thumb-bg:       #c2185b;
  --scrollbar-thumb-hover-bg: #8d1044;

  /* === Shadows === */
  --shadow-light:  rgba(80, 0, 40, 0.08);
  --shadow-medium: rgba(80, 0, 40, 0.16);
  --shadow-dark:   rgba(80, 0, 40, 0.28);

  /* === Cloud Visuals === */
  --cloud-leader-line-color: #c2185b;
  --cloud-leader-line-opacity: 0.90;
  --cloud-leader-line-width: 1.0;
  --cloud-label-border-color: rgba(194, 24, 91, 0.40);
  --cloud-label-border-width: 1px;
  --cloud-leader-shadow-color: rgba(0, 0, 0, 0.28);
  --cloud-leader-shadow-opacity: 0.28;
  --cloud-leader-shadow-width-extra: 1.25;
  --cloud-leader-shadow-translate-x: 1.0;
  --cloud-leader-shadow-translate-y: 1.8;
  --cloud-leader-shadow-blur: 1.4;

  /* === Paginator === */
  --paginator-bg:     var(--section-bg-color);
  --paginator-text:   var(--text-primary);
  --paginator-border: var(--border-light);
  --paginator-hover:  #f5dcea;
}

/* _light-slate.scss */
.light-slate-theme {
  /* === Core Backgrounds === */
  --bg-primary:        #edf1f7;   /* cool blue-white — main canvas */
  --bg-secondary:      #cdd8e8;   /* steel blue — sidebars */
  --bg-tertiary:       #dde5f0;   /* cards — between */
  --bg-disabled:       #b8c8da;

  --background-color:  var(--bg-primary);
  --background-hover:  #d8e3f0;
  --card-background:   var(--bg-tertiary);
  --section-bg-color:  #b8c8e0;

  /* === Text === */
  --text-primary:   #0a1020;   /* near-black steel — ~17:1 on bg-primary */
  --text-secondary: #1a2f50;   /* dark slate blue — ~10:1 */
  --text-tertiary:  #2a4268;   /* medium slate */
  --text-muted:     #385278;   /* ~5:1 on bg-secondary */
  --text-inverse:   #edf1f7;
  --text-color:     var(--text-primary);

  /* === Borders === */
  --border-color:  #809ab8;
  --border-light:  #a0b5cc;
  --border-dark:   #5878a0;
  --contextual-help-panel-border-width: 1px;
  --contextual-help-panel-border-color: var(--border-dark);

  /* === UI Surfaces === */
  --table-hover-bg: #d8e3f0;
  --input-bg:       #f5f8ff;
  --card-bg:        var(--bg-tertiary);
  --toolbar-bg:     var(--bg-secondary);

  /* === Brand === */
  --primary-color:     #2c5282;
  --primary-dark:      #1e3a6a;
  --primary-light:     #3b6baa;
  --primary-color-rgb: 44, 82, 130;

  --accent-color:     #3a86e8;
  --accent-dark:      #2563eb;
  --accent-light:     #60a5fa;
  --accent-color-rgb: 58, 134, 232;

  /* === Status === */
  --success-color:      #1a7a34;
  --success-color-dark: #135c27;
  --success-color-rgb:  26, 122, 52;

  --danger-color:      #c0392b;
  --danger-color-dark: #8e1c1c;
  --danger-color-rgb:  192, 57, 43;

  --warning-color:      #b06000;
  --warning-color-dark: #884800;
  --warning-color-rgb:  176, 96, 0;

  --info-color:      #2c5282;
  --info-color-dark: #1e3a6a;
  --info-color-rgb:  44, 82, 130;

  /* === Scrollbar === */
  --scrollbar-track-bg:       var(--bg-secondary);
  --scrollbar-thumb-bg:       #2c5282;
  --scrollbar-thumb-hover-bg: #1e3a6a;

  /* === Shadows === */
  --shadow-light:  rgba(0, 20, 60, 0.08);
  --shadow-medium: rgba(0, 20, 60, 0.16);
  --shadow-dark:   rgba(0, 20, 60, 0.28);

  /* === Cloud Visuals === */
  --cloud-leader-line-color: #2c5282;
  --cloud-leader-line-opacity: 0.90;
  --cloud-leader-line-width: 1.0;
  --cloud-label-border-color: rgba(44, 82, 130, 0.40);
  --cloud-label-border-width: 1px;
  --cloud-leader-shadow-color: rgba(0, 0, 0, 0.28);
  --cloud-leader-shadow-opacity: 0.28;
  --cloud-leader-shadow-width-extra: 1.25;
  --cloud-leader-shadow-translate-x: 1.0;
  --cloud-leader-shadow-translate-y: 1.8;
  --cloud-leader-shadow-blur: 1.4;

  /* === Paginator === */
  --paginator-bg:     var(--section-bg-color);
  --paginator-text:   var(--text-primary);
  --paginator-border: var(--border-light);
  --paginator-hover:  #d8e3f0;
}

/* _light-teal.scss */
.light-teal-theme {
  /* === Core Backgrounds === */
  --bg-primary:        #eaf7f5;   /* purest mint-white — main canvas */
  --bg-secondary:      #c5e8e3;   /* rich teal-mint — sidebars */
  --bg-tertiary:       #d5f0ec;   /* cards — between */
  --bg-disabled:       #a8d5d0;

  --background-color:  var(--bg-primary);
  --background-hover:  #d0ece8;
  --card-background:   var(--bg-tertiary);
  --section-bg-color:  #98d8d0;

  /* === Text === */
  --text-primary:   #051a18;   /* near-black teal — ~17:1 on bg-primary */
  --text-secondary: #0d3835;   /* deep teal — ~10:1 */
  --text-tertiary:  #1a5450;   /* medium teal */
  --text-muted:     #276862;   /* ~5:1 on bg-secondary */
  --text-inverse:   #eaf7f5;
  --text-color:     var(--text-primary);

  /* === Borders === */
  --border-color:  #68b8b0;
  --border-light:  #88ccc5;
  --border-dark:   #409890;
  --contextual-help-panel-border-width: 1px;
  --contextual-help-panel-border-color: var(--border-dark);

  /* === UI Surfaces === */
  --table-hover-bg: #d0ece8;
  --input-bg:       #f5fefd;
  --card-bg:        var(--bg-tertiary);
  --toolbar-bg:     var(--bg-secondary);

  /* === Brand === */
  --primary-color:     #00897b;
  --primary-dark:      #006b60;
  --primary-light:     #26a899;
  --primary-color-rgb: 0, 137, 123;

  --accent-color:     #00bfa5;
  --accent-dark:      #009a85;
  --accent-light:     #33d4bc;
  --accent-color-rgb: 0, 191, 165;

  /* === Status === */
  --success-color:      #256e48;
  --success-color-dark: #1a5438;
  --success-color-rgb:  37, 110, 72;

  --danger-color:      #b03025;
  --danger-color-dark: #882018;
  --danger-color-rgb:  176, 48, 37;

  --warning-color:      #a06000;
  --warning-color-dark: #784800;
  --warning-color-rgb:  160, 96, 0;

  --info-color:      #0077b6;
  --info-color-dark: #005580;
  --info-color-rgb:  0, 119, 182;

  /* === Scrollbar === */
  --scrollbar-track-bg:       var(--bg-secondary);
  --scrollbar-thumb-bg:       #00897b;
  --scrollbar-thumb-hover-bg: #006b60;

  /* === Shadows === */
  --shadow-light:  rgba(0, 60, 55, 0.08);
  --shadow-medium: rgba(0, 60, 55, 0.16);
  --shadow-dark:   rgba(0, 60, 55, 0.28);

  /* === Cloud Visuals === */
  --cloud-leader-line-color: #00897b;
  --cloud-leader-line-opacity: 0.90;
  --cloud-leader-line-width: 1.0;
  --cloud-label-border-color: rgba(0, 137, 123, 0.40);
  --cloud-label-border-width: 1px;
  --cloud-leader-shadow-color: rgba(0, 0, 0, 0.28);
  --cloud-leader-shadow-opacity: 0.28;
  --cloud-leader-shadow-width-extra: 1.25;
  --cloud-leader-shadow-translate-x: 1.0;
  --cloud-leader-shadow-translate-y: 1.8;
  --cloud-leader-shadow-blur: 1.4;

  /* === Paginator === */
  --paginator-bg:     var(--section-bg-color);
  --paginator-text:   var(--text-primary);
  --paginator-border: var(--border-light);
  --paginator-hover:  #d0ece8;
}

/* _light.scss */
.light-theme {
  --bg-primary:        #e7eee9;   /* main canvas — warm off-white, clearly not white */
  --bg-secondary:      #c9d5cc;   /* sidebars/sections — ~30 steps deeper, visibly distinct */
  --bg-tertiary:       #d8e2db;   /* card surfaces — between primary and secondary */
  --bg-disabled:       #b8c9bc;

  --background-color:  var(--bg-primary);
  --background-hover:  #cdd7d0;   /* clear hover lift */
  --card-background:   var(--bg-tertiary);

  --section-bg-color:  #b0cceb;   /* richer blue-tinted section bg */

  /* === Text — all values hit 4.5:1+ against every surface above === */
  --text-primary:      #0f1c14;   /* near-black, ~14:1 on bg-primary */
  --text-secondary:    #264035;   /* dark forest, ~9:1 on bg-primary, ~6:1 on bg-secondary */
  --text-tertiary:     #325245;   /* medium-dark, passes on all surfaces */
  --text-muted:        #3e5a46;   /* ~5:1 on bg-secondary (darkest surface) — passes AA */
  --text-inverse:      #e7eee9;
  --text-color:        var(--text-primary);

  /* === Borders — clearly visible against all backgrounds === */
  --border-color:      #8fa09a;   /* main border — well above bg-tertiary */
  --border-light:      #aebdb4;   /* soft inner separation */
  --border-dark:       #6e8880;   /* strong emphasis border */
  --contextual-help-panel-border-width: 1px;
  --contextual-help-panel-border-color: var(--border-dark);

  
  --table-hover-bg:    #cdd7d0;
  --input-bg:          #eef4f0;   /* inputs sit lighter than canvas so they read as interactive */
  --card-bg:           var(--bg-tertiary);
  --toolbar-bg:        var(--bg-secondary);

  
  --scrollbar-track-bg:       var(--bg-secondary);
  --scrollbar-thumb-bg:       var(--primary-color);
  --scrollbar-thumb-hover-bg: var(--primary-dark);

  
  --paginator-bg:      var(--section-bg-color);
  --paginator-text:    var(--text-primary);
  --paginator-border:  var(--border-light);
  --paginator-hover:   #cdd7d0;
}