/* ==========================================================================
   DESIGN TOKENS - ENHANCED THEME SYSTEM V2

   ADDITIONS IN V2:
   - Extended shadow system (micro, rail, header, modal, card, etc.)
   - Card/container backgrounds
   - Selection states
   - Modal overlay/surface
   - Sidebar theming
   - Status colors
   - Inset shadows for buttons/sliders

   ARCHITECTURE:
   1. Theme-specific variables (--theme-*) define the palette per theme
   2. Semantic variables reference theme vars
   3. Each [data-theme] block overrides the --theme-* variables
   ========================================================================== */

:root {
   /* =========================================================================
       THEME: COBALT DEEP (Default)
       ========================================================================= */

   /* -------------------------------------------------------------------------
       THEME-SPECIFIC PALETTE - Override these in each theme
       ------------------------------------------------------------------------- */

   /* Header background - solid tint + dot overlay */
   --theme-header-bg: #E8EEF5;
   /* Subtle cobalt tint */
   --theme-header-dots-opacity: 0.18;

   /* Backgrounds */
   --theme-bg-app: #FFFFFF;
   /* App background */
   --theme-bg-panel: #E5E5E5;
   /* Panel background */
   --theme-bg-surface: #F5F5F5;
   /* Elevated surfaces, cards */
   --theme-bg-input: #FFFFFF;
   /* Input fields */
   --theme-bg-hover: #D4D4D4;
   /* Hover states */
   --theme-bg-active: #000000;
   /* Active/selected states */
   --theme-bg-highlight: #FFF9E6;
   /* Selection highlight */
   --theme-bg-preview: #F5F5F5;
   /* Image preview areas */

   /* Text */
   --theme-text-primary: #000000;
   /* Primary text */
   --theme-text-secondary: #404040;
   /* Secondary text */
   --theme-text-muted: #737373;
   /* Muted/disabled text */
   --theme-text-inverse: #FFFFFF;
   /* Text on dark backgrounds */
   --theme-text-link: #0047AB;
   /* Link text */

   /* Borders */
   --theme-border-strong: #000000;
   /* Strong borders (panels, inputs) */
   --theme-border-normal: #D4D4D4;
   /* Normal borders */
   --theme-border-light: #E5E5E5;
   /* Subtle borders */
   --theme-border-focus: #FFD700;
   /* Focus ring color */

   /* Accent colors */
   --theme-accent-primary: #FFD700;
   /* Primary accent (banana yellow) */
   --theme-accent-secondary: #1A6BD6;
   /* Secondary accent (cobalt) */
   --theme-accent-hover: #E6C200;
   /* Accent hover */
   --theme-app-bar-bg: var(--theme-accent-secondary);

   /* -------------------------------------------------------------------------
       SHADOWS - Extended System
       ------------------------------------------------------------------------- */
   --theme-shadow-color: rgba(0, 0, 0, 0.8);
   --theme-shadow-soft: rgba(0, 0, 0, 0.2);

   /* Button shadows */
   --theme-shadow-btn: 4px 4px 0px var(--theme-border-strong);
   --theme-shadow-btn-hover: 4px 4px 0px var(--theme-border-strong);
   --theme-shadow-btn-active: none;
   --theme-shadow-btn-disabled: 4px 4px 0px rgba(0, 0, 0, 0.4);

   /* Micro/small shadows */
   --theme-shadow-micro: 1px 1px 0 var(--theme-shadow-color);
   --theme-shadow-rail: 1px 1px 0px rgba(0, 0, 0, 0.5);
   --theme-shadow-header: 2px 2px 0px var(--theme-shadow-color);
   --theme-app-bar-shadow: 3px 3px 0px #000000;

   /* Card/panel shadows */
   --theme-shadow-card: none;
   --theme-shadow-card-hover: 4px 4px 0 var(--theme-border-strong);
   --theme-shadow-panel: 2px 2px 0px rgba(0, 0, 0, 0.1);

   /* Dropdown/modal shadows */
   --theme-shadow-dropdown: 0 4px 12px rgba(0, 0, 0, 0.2);
   --theme-shadow-modal: 10px 10px 0px rgba(0, 0, 0, 0.2);
   --theme-shadow-modal-heavy: 0 20px 60px rgba(0, 0, 0, 0.5);
   --theme-shadow-modal-soft: 0 10px 25px rgba(0, 0, 0, 0.2);

   /* Soft shadows (preview panels, etc) */
   --theme-shadow-soft-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
   --theme-shadow-soft-md: 0 4px 8px rgba(0, 0, 0, 0.1);

   /* Focus/selection shadows */
   --theme-shadow-focus: 0 0 0 2px rgba(255, 215, 0, 0.3);
   --theme-shadow-selection: 3px 3px 0 var(--theme-shadow-color);

   /* Inset shadows (for 3D effects) */
   --theme-inset-light: #FFFFFF;
   --theme-inset-dark: #808080;
   --theme-inset-highlight: rgba(255, 255, 255, 0.5);
   --theme-inset-shadow: rgba(0, 0, 0, 0.3);
   --theme-inset-btn-active: inset 1px 1px 0px rgba(255, 255, 255, 0.3);
   --theme-inset-pressed: inset 1px 1px 2px rgba(0, 0, 0, 0.2);
   --theme-inset-slider: inset 1px 1px 0 rgba(255, 255, 255, 0.2);

   /* Slider shadows */
   --theme-shadow-slider-btn: 1px 1px 0px rgba(0, 0, 0, 0.5);
   --theme-shadow-slider-thumb: 0 1px 3px rgba(0, 0, 0, 0.4);

   /* -------------------------------------------------------------------------
       SCROLLBAR
       ------------------------------------------------------------------------- */
   --theme-scrollbar-track: var(--theme-bg-hover);
   --theme-scrollbar-thumb: var(--theme-border-strong);
   --theme-scrollbar-thumb-hover: var(--theme-text-secondary);

   /* -------------------------------------------------------------------------
       MODAL/OVERLAY
       ------------------------------------------------------------------------- */
   --theme-modal-overlay: rgba(0, 0, 0, 0.5);
   --theme-modal-bg: var(--theme-bg-panel);
   --theme-modal-surface: var(--theme-bg-surface);
   --theme-modal-border: var(--theme-border-normal);

   /* -------------------------------------------------------------------------
       SIDEBAR
       ------------------------------------------------------------------------- */
   --theme-sidebar-bg: var(--theme-bg-panel);
   --theme-sidebar-border: var(--theme-border-light);
   --theme-sidebar-item-bg: transparent;
   --theme-sidebar-item-hover: var(--theme-bg-hover);
   --theme-sidebar-item-active: var(--theme-bg-active);

   /* -------------------------------------------------------------------------
       ICON COLORS (currentColor-based theming)
       Icons use fill="currentColor" and inherit from these variables
       ------------------------------------------------------------------------- */
   --theme-icon-color: var(--gray-700);
   /* Default icon color */
   --theme-icon-color-active: var(--color-function);
   /* Active/selected state */
   --theme-icon-primary: var(--gray-900);
   --theme-icon-secondary: var(--gray-600);
   --theme-icon-active: var(--color-function);

   /* -------------------------------------------------------------------------
       DOT PATTERN BACKGROUNDS
       ------------------------------------------------------------------------- */
   --theme-dots-color: var(--gray-400);
   --theme-dots-bg: var(--gray-200);

   /* -------------------------------------------------------------------------
       BUTTON BACKGROUNDS
       ------------------------------------------------------------------------- */
   --theme-btn-bg: var(--color-white);
   --theme-btn-bg-hover: var(--gray-100);

   /* -------------------------------------------------------------------------
       ACTIVE/SELECTED STATES
       ------------------------------------------------------------------------- */
   --theme-active-bg: var(--color-black);
   --theme-active-text: var(--color-white);
   --theme-selected-ink: #FFFF79;

   /* -------------------------------------------------------------------------
       SENDER LABEL PILLS
       ------------------------------------------------------------------------- */
   --theme-sender-user-bg: var(--theme-border-strong);
   --theme-sender-user-text: var(--theme-accent-primary);
   --theme-sender-asst-bg: var(--theme-accent-secondary);
   --theme-sender-asst-text: var(--theme-text-inverse);

   /* -------------------------------------------------------------------------
       LEGACY ALIASES (for backwards compatibility)
       ------------------------------------------------------------------------- */
   --theme-text-on-dark: var(--theme-text-inverse);
   --theme-preview-bg: var(--theme-bg-preview);
   --theme-shadow-header-brand: var(--theme-shadow-header);
   --theme-shadow-header-dropdown: var(--theme-shadow-btn-disabled);
   --theme-shadow-item-selected: 2px 2px 0 var(--theme-accent-primary);

   /* -------------------------------------------------------------------------
       SELECTION
       ------------------------------------------------------------------------- */
   --theme-selection-bg: #FFF9E6;
   --theme-selection-text: var(--theme-text-primary);
   --theme-selection-border: var(--theme-accent-primary);

   /* -------------------------------------------------------------------------
       STATUS COLORS (Themeable)
       ------------------------------------------------------------------------- */
   --theme-status-warning-bg: #FFF3CD;
   --theme-status-warning-text: #856404;
   --theme-status-warning-border: #FFEEBA;

   --theme-status-success-bg: #CCFBF1;
   --theme-status-success-text: #065F46;
   --theme-status-success-border: #0D9488;

   --theme-status-error-bg: #FEE2E2;
   --theme-status-error-text: #991B1B;
   --theme-status-error-border: #DC2626;

   /* -------------------------------------------------------------------------
       CORE BRAND COLORS (stay consistent across themes)
       ------------------------------------------------------------------------- */
   --color-black: #000000;
   --color-white: #FFFFFF;
   --color-accent: var(--theme-accent-primary);
   --color-accent-dark: var(--theme-accent-hover);
   --color-accent-hover: var(--theme-accent-hover);
   --color-function: #FFFF79;

   /* -------------------------------------------------------------------------
       COBALT BLUE FAMILY
       ------------------------------------------------------------------------- */
   --color-cobalt: #0047AB;
   --color-cobalt-deep: #002255;
   --color-cobalt-light: #7EB0FF;
   --color-cobalt-pale: #B8D4FF;
   --color-cobalt-wash: #F0F4FF;

   /* -------------------------------------------------------------------------
       STATE COLORS
       ------------------------------------------------------------------------- */
   --color-active-bg: var(--theme-bg-active);
   --color-active-text: var(--theme-text-inverse);

   /* -------------------------------------------------------------------------
       TAG COLORS
       ------------------------------------------------------------------------- */
   --color-tag-bg: #44403C;
   --color-tag-text: #FFFFFF;

   /* -------------------------------------------------------------------------
       WARNING COLORS
       ------------------------------------------------------------------------- */
   --color-warning: #F5A623;
   --color-warning-hover: #E5961A;
   --color-warning-bright: #FF8C00;
   --color-warning-soft: #FFF5F0;
   --color-warning-light: #FFF8F4;
   --color-warning-lighter: #FFF0E8;
   --color-warning-border: #FFD0C0;
   --color-warning-pill: #FFE4D6;

   /* -------------------------------------------------------------------------
       SUCCESS / ERROR / STATUS COLORS
       ------------------------------------------------------------------------- */
   --color-success: #0D9488;
   --color-success-soft: #CCFBF1;
   --success-color: var(--color-success);

   --color-error: #B91C1C;
   --color-error-soft: #FEE2E2;
   --error-color: var(--color-error);

   /* Status indicator colors (automations, scripts) */
   --color-status-critical: #D32F2F;
   --color-status-warn: #E65100;
   --color-status-good: #2E7D32;

   /* Overlay */
   --overlay-dark: rgba(0, 0, 0, 0.6);

   --color-text: var(--theme-text-primary);

   --status-good-border: var(--color-success);
   --status-bad-border: var(--color-error);
   --status-good-bg: var(--theme-status-success-bg);
   --status-good-text: var(--theme-status-success-text);
   --status-bad-bg: var(--theme-status-error-bg);
   --status-bad-text: var(--theme-status-error-text);
   --status-pending-bg: var(--color-accent);
   --status-pending-text: #000000;
   --status-pending-border: var(--color-accent);
   --status-off-bg: var(--gray-200);
   --status-off-text: var(--gray-600);

   /* System verdict colors (global, not theme-specific) */
   --system-verdict-best: #2563EB;
   --system-verdict-good: #059669;
   --system-verdict-weak: #D97706;
   --system-verdict-failed: #DC2626;

   /* -------------------------------------------------------------------------
       MODEL COLORS
       ------------------------------------------------------------------------- */
   --color-model-gemini: #007AFF;
   --color-model-gemini3: #38B6FF;
   --color-model-imagen: #003366;
   --color-model-imagen-fast: #1E5A8A;
   --color-model-default: #8E8E93;

   /* -------------------------------------------------------------------------
       MODE BADGE COLORS
       ------------------------------------------------------------------------- */
   --mode-nano: #B8D4FF;
   --mode-nano-text: #0047AB;
   --mode-glyph: #7EB0FF;
   --mode-glyph-text: #003380;
   --mode-icon: #FFD700;
   --mode-icon-text: #000000;
   --mode-icon-bw: #7EB0FF;
   --mode-icon-bw-text: #003380;
   --mode-icon-plus: #0047AB;
   --mode-icon-plus-text: #FFFFFF;
   --mode-real: #002255;
   --mode-real-text: #FFFFFF;
   --mode-morph: #0047AB;
   --mode-morph-text: #FFFFFF;
   --mode-family: #0047AB;
   --mode-family-text: #FFFFFF;

   /* -------------------------------------------------------------------------
       GRAY SCALE
       ------------------------------------------------------------------------- */
   --gray-50: #FAFAFA;
   --gray-100: #F5F5F5;
   --gray-200: #E5E5E5;
   --gray-300: #D4D4D4;
   --gray-400: #A3A3A3;
   --gray-500: #737373;
   --gray-600: #525252;
   --gray-700: #404040;
   --gray-800: #262626;
   --gray-900: #171717;


   /* Legacy gray aliases - REMOVED */


   /* -------------------------------------------------------------------------
       SEMANTIC COLORS - Now reference theme variables!
       ------------------------------------------------------------------------- */
   --bg-main: var(--theme-bg-app);
   --bg-panel: var(--theme-bg-panel);
   --bg-secondary: var(--theme-bg-surface);
   --bg-tertiary: var(--theme-bg-surface);
   --bg-hover: var(--theme-bg-hover);
   --bg-input: var(--theme-bg-input);
   --border: var(--theme-border-normal);
   --border-dark: var(--theme-border-strong);
   --border-light: var(--theme-border-light);
   --text-main: var(--theme-text-primary);
   --text-dim: var(--theme-text-secondary);
   --text-muted: var(--theme-text-muted);

   /* Card/Surface (NEW) */
   --card-bg: var(--theme-bg-surface);
   --card-border: var(--theme-border-normal);
   --card-hover-shadow: var(--theme-shadow-card-hover);
   --preview-bg: var(--theme-bg-preview);
   --selection-bg: var(--theme-selection-bg);

   /* Shadow colors */
   --accent-rgb: 255, 215, 0;
   --error-rgb: 185, 28, 28;
   --success-rgb: 13, 148, 136;

   /* -------------------------------------------------------------------------
       SPECIALTY COLORS
       ------------------------------------------------------------------------- */
   --color-settings-welcome-bg: #FFF7D6;
   --color-variant-format: #F5D15A;
   --color-variant-format-svg: #8BC5F9;
   --color-save-svg-start: #3B82F6;
   --color-save-svg-end: #2563EB;
   --color-save-svg-border: #1D4ED8;
   --color-save-svg-shadow: #1E40AF;
   --color-selection-bg: var(--theme-selection-bg);
   --color-header-alert: #FF4400;
   --color-history-warning-bg: #FFF7D1;
   --color-history-error-bg: var(--theme-status-error-bg);
   --color-history-error-text: var(--color-error);
   --color-history-error-border: #FCA5A5;
   --color-history-delete: #DC2626;
   --color-history-delete-border: #B91C1C;
   --color-history-debug: #FF8C00;
   --color-glyph-terminal-bg: #1E1E1E;
   --color-glyph-terminal-text: #D4D4D4;
   --color-glyph-note-bg: #FFFDE7;
   --color-glyph-note-border: #F9A825;
   --color-glyph-note-blue-bg: #E3F2FD;
   --color-glyph-note-blue-border: #1976D2;
   --color-glyph-note-red-bg: #FFEBEE;
   --color-glyph-note-red-border: #D32F2F;
   --color-processing-error-bg: #FFCCCC;

   /* =========================================================================
       PATTERNS
       ========================================================================= */
   --dither-pattern: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAFElEQVQImWNkYGBgYmBgYmBgYGBgAAAABQAB6S62xwAAAABJRU5ErkJggg==');

   /* =========================================================================
       STATIC TOKENS (Don't change with theme)
       ========================================================================= */

   /* Typography */
   --font-mono: 'JetBrains Mono', 'Courier New', monospace;
   --font-ui: var(--font-mono);
   /* Buttons, labels, panel headers, nav */
   --font-data: var(--font-mono);
   /* File tables, status log, inputs — always mono */
   --font-brand: var(--font-mono);
   /* MEGA header, modal titles, hero text */

   /* Prose (dashboard chat) */
   --prose-measure: 68ch;
   --prose-size: 14.5px;
   --prose-leading: 1.58;

   --text-3xs: 8px;
   --text-2xs: 9px;
   --text-micro: 10px;
   --text-xs: 11px;
   --text-sm: 12px;
   --text-lg: 13px;
   --text-lg-plus: 14px;
   --text-xl: 15px;
   --text-2xl: 16px;
   --text-3xl: 20px;
   --text-4xl: 24px;
   --text-5xl: 28px;

   --weight-normal: 400;
   --weight-semibold: 600;
   --weight-bold: 700;
   --weight-black: 800;

   /* Spacing */
   --space-0: 0px;
   --space-1: 2px;
   --space-2: 4px;
   --space-3: 6px;
   --space-4: 8px;
   --space-5: 10px;
   --space-6: 12px;
   --space-7: 16px;
   --space-8: 20px;
   --space-9: 24px;
   --space-10: 32px;

   /* Sizing */
   --size-btn-sm: 24px;
   --size-btn-md: 32px;
   --size-btn-lg: 38px;
   --size-input: 24px;
   --size-icon-sm: 12px;
   --size-icon-md: 14px;
   --size-icon-lg: 16px;
   --size-icon-xl: 18px;

   /* Z-Index Scale */
   --z-base: 1;
   --z-dropdown: 10;
   --z-sticky: 100;
   --z-rail: 200;
   --z-header: 500;
   --z-modal: 1000;
   --z-tooltip: 9999;

   /* Borders & Shadows - Now reference theme shadows */
   --border-width: 1px;
   --border-width-thick: 2px;
   --border-standard: var(--border-width) solid var(--border-dark);
   --border-soft: var(--border-width) solid var(--border-light);

   --shadow-sm: var(--theme-shadow-micro);
   --shadow-md: 2px 2px 0px var(--theme-shadow-color);
   --shadow-lg: var(--theme-shadow-btn);
   --shadow-btn: var(--theme-shadow-btn);
   --shadow-btn-hover: var(--theme-shadow-btn-hover);
   --shadow-inset: inset 1px 1px 0px var(--theme-inset-light), inset -1px -1px 0px var(--theme-inset-dark);

   /* Scrollbar */
   --scrollbar-width: 8px;
   --scrollbar-track-color: var(--theme-scrollbar-track);
   --scrollbar-thumb-color: var(--theme-scrollbar-thumb);
   --resize-handle-width: 6px;
   --resize-handle-color: var(--theme-border-strong);
   --resize-handle-line-color: var(--theme-text-inverse);

   /* Transitions */
   --duration-fast: 0.05s;
   --duration-normal: 0.1s;
   --duration-slow: 0.2s;
   --ease-out: ease-out;

   /* Header */
   --header-bg-image: url('../assets/header-bg.svg');
   --header-bg-size: cover;
   --header-bg-position: top left;
   --header-bg-repeat: repeat;
   --header-height: 50px;
   --header-padding-x: 12px;
   --header-padding-y: 0;
   --header-border-bottom: var(--border-standard);
   --header-font-size: var(--text-sm);
}


/* ==========================================================================
   THEME: MAC SYSTEM 7
   Classic Macintosh platinum gray
   ========================================================================== */
[data-theme="mac-system7"] {
   --theme-header-bg: #EEEEEE;
   /* Platinum gray */
   --theme-header-dots-opacity: 0.18;

   /* Backgrounds - Platinum */
   --theme-bg-app: #FFFFFF;
   --theme-bg-panel: #DDDDDD;
   --theme-bg-surface: #EEEEEE;
   --theme-bg-input: #FFFFFF;
   --theme-bg-hover: #BBBBBB;
   --theme-bg-active: #000000;
   --theme-bg-highlight: #FFFFCC;
   --theme-bg-preview: #DDDDDD;

   /* Text - Pure black */
   --theme-text-primary: #000000;
   --theme-text-secondary: #333333;
   --theme-text-muted: #666666;
   --theme-text-inverse: #FFFFFF;
   --theme-text-link: #000000;

   /* Borders - Classic Mac style */
   --theme-border-strong: #000000;
   --theme-border-normal: #999999;
   --theme-border-light: #BBBBBB;
   --theme-border-focus: #000000;

   /* Accents - Classic Mac Blue */
   --theme-accent-primary: #3399FF;
   --theme-accent-secondary: #000000;
   --theme-accent-hover: #2288EE;

   /* Classic Mac shadows - HEAVY black */
   --theme-shadow-color: rgba(0, 0, 0, 0.8);
   --theme-shadow-soft: rgba(0, 0, 0, 0.4);
   --theme-shadow-btn: 2px 2px 0px #000000;
   --theme-shadow-btn-hover: 2px 2px 0px #000000;
   --theme-shadow-card-hover: 2px 2px 0 #000000;
   --theme-shadow-micro: 1px 1px 0 #000000;
   --theme-shadow-header: 1px 1px 0 #000000;
   --theme-shadow-modal: 4px 4px 0px #000000;

   /* Classic Mac 3D insets */
   --theme-inset-light: #FFFFFF;
   --theme-inset-dark: #808080;
   --theme-inset-highlight: #FFFFFF;
   --theme-inset-shadow: #808080;
   --theme-inset-btn-active: inset 1px 1px 0 #808080, inset -1px -1px 0 #FFFFFF;

   /* Scrollbar - Classic */
   --theme-scrollbar-track: #CCCCCC;
   --theme-scrollbar-thumb: #888888;
   --theme-scrollbar-thumb-hover: #666666;

   /* Selection */
   --theme-selection-bg: #000000;
   --theme-selection-text: #FFFFFF;

   /* Icon colors - High contrast black */
   --theme-icon-color: #000000;
   /* Pure black icons */
   --theme-icon-color-active: #FFFFFF;
   --theme-icon-primary: #000000;
   --theme-icon-secondary: #333333;
   --theme-icon-active: #FFFFFF;

   /* Dot patterns - Visible on platinum */
   --theme-dots-color: #888888;
   --theme-dots-bg: #CCCCCC;

   /* Button backgrounds - Classic Mac */
   --theme-btn-bg: #DDDDDD;
   --theme-btn-bg-hover: #BBBBBB;

   /* Active states - Classic black/white */
   --theme-active-bg: #000000;
   --theme-active-text: #FFFFFF;
   --theme-selected-ink: #EEEEEE;

   /* Cobalt family → Platinum gray */
   --color-cobalt: #666666;
   --color-cobalt-deep: #000000;
   --color-cobalt-light: #999999;
   --color-cobalt-pale: #CCCCCC;
   --color-cobalt-wash: #EEEEEE;

   /* Tags */
   --color-tag-bg: #000000;
   --color-tag-text: #FFFFFF;

}


/* ==========================================================================
   THEME: MINT CHIP
   Fresh mint green with warm accents
   ========================================================================== */
[data-theme="mint-chip"] {
   --theme-header-bg: #E8F5F0;
   /* Light mint */
   --theme-header-dots-opacity: 0.15;

   /* Backgrounds */
   --theme-bg-app: #E8F5E9;
   --theme-bg-panel: #E0F2E3;
   --theme-bg-surface: #F0FAF7;
   --theme-bg-input: #FFFFFF;
   --theme-bg-hover: #C8E6C9;
   --theme-bg-active: #2D4A42;
   --theme-bg-highlight: #D8F4ED;
   --theme-bg-preview: #F0FAF7;

   /* Text */
   --theme-text-primary: #1B3A31;
   --theme-text-secondary: #3D6B5C;
   --theme-text-muted: #6B9B8A;
   --theme-text-inverse: #FFFFFF;
   --theme-text-link: #2E7D32;

   /* Borders */
   --theme-border-strong: #2D4A42;
   --theme-border-normal: #A5D6A7;
   --theme-border-light: #C8E6C9;
   --theme-border-focus: #4A7C6F;

   /* Accents */
   --theme-accent-primary: #4A7C6F;
   --theme-accent-secondary: #4A7C6F;
   --theme-accent-hover: #5E9588;

   /* Shadows */
   --theme-shadow-color: rgba(45, 74, 66, 0.6);
   --theme-shadow-btn: 4px 4px 0px #2D4A42;
   --theme-shadow-btn-hover: 4px 4px 0px #2D4A42;
   --theme-shadow-card-hover: 4px 4px 0 #2D4A42;

   /* Cobalt family → Mint family */
   --color-cobalt: #4A7C6F;
   --color-cobalt-deep: #2D4A42;
   --color-cobalt-light: #98D8C8;
   --color-cobalt-pale: #D8F4ED;
   --color-cobalt-wash: #F0FAF7;

   /* Tags */
   --color-tag-bg: #2D4A42;
   --color-tag-text: #FFFFFF;


   /* Status */
   --status-good-bg: #D8F4ED;
   --status-good-text: #2D4A42;

   /* Icon colors - Mint themed */
   --theme-icon-color: #2D4A42;
   /* Deep mint icons */
   --theme-icon-color-active: var(--color-white);

   /* Icon/Button/Active theming */
   --theme-dots-color: #6B9B8A;
   --theme-dots-bg: #C8E6C9;
   --theme-btn-bg: #F0FAF7;
   --theme-btn-bg-hover: #C8E6C9;
   --theme-active-bg: #2D4A42;
   --theme-active-text: #FFFFFF;
   --theme-selected-ink: #98FB98;
}


/* ==========================================================================
   THEME: HONEY BUTTER
   Warm golden tones, cozy and inviting
   ========================================================================== */
[data-theme="honey-butter"] {
   --theme-header-bg: #FFF8EE;
   /* Warm honey */
   --theme-header-dots-opacity: 0.15;

   /* Backgrounds */
   --theme-bg-app: #FFF8E7;
   --theme-bg-panel: #FFF5E0;
   --theme-bg-surface: #FFFAF0;
   --theme-bg-input: #FFFFFF;
   --theme-bg-hover: #FFE8B8;
   --theme-bg-active: #6B4423;
   --theme-bg-highlight: #FFF5E0;
   --theme-bg-preview: #FFFAF0;

   /* Text */
   --theme-text-primary: #3D2B1F;
   --theme-text-secondary: #6B4423;
   --theme-text-muted: #9B7B5B;
   --theme-text-inverse: #FFFFFF;
   --theme-text-link: #8B6914;

   /* Borders */
   --theme-border-strong: #6B4423;
   --theme-border-normal: #DEB887;
   --theme-border-light: #F5DEB3;
   --theme-border-focus: #F5A623;

   /* Accents */
   --theme-accent-primary: #F5A623;
   --theme-accent-secondary: #DAA520;
   --theme-accent-hover: #FFB84D;

   /* Shadows */
   --theme-shadow-color: rgba(107, 68, 35, 0.6);
   --theme-shadow-btn: 4px 4px 0px #6B4423;
   --theme-shadow-btn-hover: 4px 4px 0px #6B4423;
   --theme-shadow-card-hover: 4px 4px 0 #6B4423;

   /* Cobalt family → Honey/Brown family */
   --color-cobalt: #DAA520;
   --color-cobalt-deep: #6B4423;
   --color-cobalt-light: #F5DEB3;
   --color-cobalt-pale: #FFF5E0;
   --color-cobalt-wash: #FFFAF0;

   /* Tags */
   --color-tag-bg: #6B4423;
   --color-tag-text: #FFF5E0;


   /* Icon colors - Honey/Brown themed */
   --theme-icon-color: #6B4423;
   /* Warm brown icons */
   --theme-icon-color-active: var(--color-white);

   /* Icon/Button/Active theming */
   --theme-dots-color: #9B7B5B;
   --theme-dots-bg: #FFE8B8;
   --theme-btn-bg: #FFFAF0;
   --theme-btn-bg-hover: #FFE8B8;
   --theme-active-bg: #6B4423;
   --theme-active-text: #FFFFFF;
   --theme-selected-ink: #F4A460;
}


/* ==========================================================================
   THEME: VAN GOGH STARRY
   Deep cobalt blue with golden yellow - inspired by Starry Night
   ========================================================================== */
[data-theme="van-gogh"] {
   --theme-header-bg: #E6EAF5;
   /* Starry blue */
   --theme-header-dots-opacity: 0.18;

   /* Backgrounds */
   --theme-bg-app: #E8EEF5;
   --theme-bg-panel: #D4E4F4;
   --theme-bg-surface: #F0F5FA;
   --theme-bg-input: #FFFFFF;
   --theme-bg-hover: #C4D8EB;
   --theme-bg-active: #1E3A5F;
   --theme-bg-highlight: #FFF9E6;
   --theme-bg-preview: #F0F5FA;

   /* Text */
   --theme-text-primary: #0F1E33;
   --theme-text-secondary: #2E4A6B;
   --theme-text-muted: #5A7A9B;
   --theme-text-inverse: #FFFFFF;
   --theme-text-link: #1E3A5F;

   /* Borders */
   --theme-border-strong: #1E3A5F;
   --theme-border-normal: #A8C8E8;
   --theme-border-light: #D4E4F4;
   --theme-border-focus: #FF8C00;

   /* Accents */
   --theme-accent-primary: #FF8C00;
   --theme-accent-secondary: #2A4F7A;
   --theme-accent-hover: #FFA333;

   /* Shadows */
   --theme-shadow-color: rgba(30, 58, 95, 0.6);
   --theme-shadow-btn: 4px 4px 0px #1E3A5F;
   --theme-shadow-btn-hover: 4px 4px 0px #1E3A5F;
   --theme-shadow-card-hover: 4px 4px 0 #1E3A5F;

   /* Intensified cobalt */
   --color-cobalt: #1E3A5F;
   --color-cobalt-deep: #0F1E33;
   --color-cobalt-light: #4A7AB0;
   --color-cobalt-pale: #A8C8E8;
   --color-cobalt-wash: #F0F5FA;

   /* Tags - deep blue */
   --color-tag-bg: #1E3A5F;
   --color-tag-text: #FFD700;


   /* Status */
   --status-good-bg: #D4E4F4;
   --status-good-text: #1E3A5F;

   /* Icon colors - Deep blue themed */
   --theme-icon-color: #1E3A5F;
   /* Deep cobalt icons */
   --theme-icon-color-active: var(--color-white);

   /* Icon/Button/Active theming */
   --theme-dots-color: #5A7A9B;
   --theme-dots-bg: #C4D8EB;
   --theme-btn-bg: #F0F5FA;
   --theme-btn-bg-hover: #C4D8EB;
   --theme-active-bg: #1E3A5F;
   --theme-active-text: #FFFFFF;
   --theme-selected-ink: #228B22;
}


/* ==========================================================================
   THEME: IKEA BOLD
   Scandinavian minimal - Yellow + Deep Blue only
   ========================================================================== */
[data-theme="ikea-bold"] {
   --theme-header-bg: #E8EEF8;
   /* IKEA blue */
   --theme-header-dots-opacity: 0.18;

   /* Backgrounds */
   --theme-bg-app: #F0F0F0;
   --theme-bg-panel: #E8E8E8;
   --theme-bg-surface: #F5F5F5;
   --theme-bg-input: #FFFFFF;
   --theme-bg-hover: #D8D8D8;
   --theme-bg-active: #003399;
   --theme-bg-highlight: #FFF9E6;
   --theme-bg-preview: #F5F5F5;

   /* Text */
   --theme-text-primary: #001A4D;
   --theme-text-secondary: #003399;
   --theme-text-muted: #6688CC;
   --theme-text-inverse: #FFFFFF;
   --theme-text-link: #003399;

   /* Borders */
   --theme-border-strong: #003399;
   --theme-border-normal: #6688CC;
   --theme-border-light: #B8C8E8;
   --theme-border-focus: #FFD700;

   /* Accents */
   --theme-accent-primary: #FFD700;
   --theme-accent-secondary: #0051BA;
   --theme-accent-hover: #E6C200;

   /* Shadows */
   --theme-shadow-color: rgba(0, 51, 153, 0.6);
   --theme-shadow-btn: 4px 4px 0px #003399;
   --theme-shadow-btn-hover: 4px 4px 0px #003399;
   --theme-shadow-card-hover: 4px 4px 0 #003399;

   /* Cobalt family → IKEA Blue family */
   --color-cobalt: #003399;
   --color-cobalt-deep: #001A4D;
   --color-cobalt-light: #6688CC;
   --color-cobalt-pale: #E8E8E8;
   --color-cobalt-wash: #F5F5F5;

   /* Tags */
   --color-tag-bg: #003399;
   --color-tag-text: #FFFFFF;


   /* Status */
   --status-good-bg: #E8E8E8;
   --status-good-text: #003399;

   /* Icon colors - IKEA blue themed */
   --theme-icon-color: #003399;
   /* Deep IKEA blue icons */
   --theme-icon-color-active: var(--color-white);

   /* Icon/Button/Active theming */
   --theme-dots-color: #6688CC;
   --theme-dots-bg: #D8D8D8;
   --theme-btn-bg: #F5F5F5;
   --theme-btn-bg-hover: #D8D8D8;
   --theme-active-bg: #003399;
   --theme-active-text: #FFFFFF;
   --theme-selected-ink: #FFD700;
}


/* ==========================================================================
   THEME: INDIGO TEAL
   Three semantic colors: Gold=hero, Teal=generate, Indigo=variant
   ========================================================================== */
[data-theme="indigo-teal"] {
   --theme-header-bg: #E8F5F5;
   /* Indigo teal */
   --theme-header-dots-opacity: 0.15;

   /* Backgrounds */
   --theme-bg-app: #E8F5F5;
   --theme-bg-panel: #E0F0F0;
   --theme-bg-surface: #F0FAF9;
   --theme-bg-input: #FFFFFF;
   --theme-bg-hover: #C8E8E6;
   --theme-bg-active: #006B66;
   --theme-bg-highlight: #B8E8E6;
   --theme-bg-preview: #F0FAF9;

   /* Text */
   --theme-text-primary: #004440;
   --theme-text-secondary: #006B66;
   --theme-text-muted: #4A9A95;
   --theme-text-inverse: #FFFFFF;
   --theme-text-link: #00B4AB;

   /* Borders */
   --theme-border-strong: #006B66;
   --theme-border-normal: #4DD4CC;
   --theme-border-light: #B8E8E6;
   --theme-border-focus: #4DD4CC;

   /* Accents */
   --theme-accent-primary: #4DD4CC;
   --theme-accent-secondary: #00B4AB;
   --theme-accent-hover: #70E0D9;

   /* Shadows */
   --theme-shadow-color: rgba(0, 107, 102, 0.6);
   --theme-shadow-btn: 4px 4px 0px #006B66;
   --theme-shadow-btn-hover: 4px 4px 0px #006B66;
   --theme-shadow-card-hover: 4px 4px 0 #006B66;

   /* Cobalt family → Teal family */
   --color-cobalt: #00B4AB;
   --color-cobalt-deep: #006B66;
   --color-cobalt-light: #4DD4CC;
   --color-cobalt-pale: #B8E8E6;
   --color-cobalt-wash: #F0FAF9;

   /* Tags - Dark gray */
   --color-tag-bg: #333333;
   --color-tag-text: #CCCCCC;


   /* Status */
   --status-good-bg: #B8E8E6;
   --status-good-text: #006B66;

   /* Icon colors - Teal themed */
   --theme-icon-color: #006B66;
   /* Teal icons */
   --theme-icon-color-active: var(--color-white);

   /* Icon/Button/Active theming */
   --theme-dots-color: #4A9A95;
   --theme-dots-bg: #C8E8E6;
   --theme-btn-bg: #F0FAF9;
   --theme-btn-bg-hover: #C8E8E6;
   --theme-active-bg: #006B66;
   --theme-active-text: #FFFFFF;
   --theme-selected-ink: #4DD4CC;
}


/* ==========================================================================
   THEME: CORAL SUNSET
   Warm, friendly duo - energetic and approachable
   ========================================================================== */
[data-theme="coral-sunset"] {
   --theme-header-bg: #FFF5EE;
   /* Coral sunset */
   --theme-header-dots-opacity: 0.12;

   /* Backgrounds */
   --theme-bg-app: #FFF5F5;
   --theme-bg-panel: #FFF0F0;
   --theme-bg-surface: #FFFAFA;
   --theme-bg-input: #FFFFFF;
   --theme-bg-hover: #FECACA;
   --theme-bg-active: #2D3436;
   --theme-bg-highlight: #FECACA;
   --theme-bg-preview: #FFFAFA;

   /* Text */
   --theme-text-primary: #2D3436;
   --theme-text-secondary: #636E72;
   --theme-text-muted: #B2BEC3;
   --theme-text-inverse: #FFFFFF;
   --theme-text-link: #FF6B6B;

   /* Borders */
   --theme-border-strong: #2D3436;
   --theme-border-normal: #FCA5A5;
   --theme-border-light: #FECACA;
   --theme-border-focus: #FF7F50;

   /* Accents */
   --theme-accent-primary: #FF7F50;
   --theme-accent-secondary: #FF6B6B;
   --theme-accent-hover: #FF9973;

   /* Shadows */
   --theme-shadow-color: rgba(45, 52, 54, 0.6);
   --theme-shadow-btn: 4px 4px 0px #2D3436;
   --theme-shadow-btn-hover: 4px 4px 0px #2D3436;
   --theme-shadow-card-hover: 4px 4px 0 #2D3436;

   /* Cobalt family → Coral family */
   --color-cobalt: #FF6B6B;
   --color-cobalt-deep: #2D3436;
   --color-cobalt-light: #FCA5A5;
   --color-cobalt-pale: #FECACA;
   --color-cobalt-wash: #FFF5F5;

   /* Tags */
   --color-tag-bg: #2D3436;
   --color-tag-text: #FFF5F5;


   /* Status */
   --status-good-bg: #FFF5F5;
   --status-good-text: #991B1B;

   /* Icon colors - Coral themed */
   --theme-icon-color: #FF6B6B;
   /* Coral icons */
   --theme-icon-color-active: var(--color-white);

   /* Icon/Button/Active theming */
   --theme-dots-color: #B2BEC3;
   --theme-dots-bg: #FECACA;
   --theme-btn-bg: #FFFAFA;
   --theme-btn-bg-hover: #FECACA;
   --theme-active-bg: #2D3436;
   --theme-active-text: #FFFFFF;
   --theme-selected-ink: #FF6B6B;
}


/* ==========================================================================
   THEME: YELLOW SLATE
   Modern Tailwind-style blue-gray
   ========================================================================== */
[data-theme="yellow-slate"] {
   --theme-header-bg: #F0F2F5;
   /* Yellow slate */
   --theme-header-dots-opacity: 0.15;

   /* Backgrounds */
   --theme-bg-app: #F1F5F9;
   --theme-bg-panel: #E2E8F0;
   --theme-bg-surface: #F8FAFC;
   --theme-bg-input: #FFFFFF;
   --theme-bg-hover: #CBD5E1;
   --theme-bg-active: #0F172A;
   --theme-bg-highlight: #FFF9E6;
   --theme-bg-preview: #F8FAFC;

   /* Text */
   --theme-text-primary: #0F172A;
   --theme-text-secondary: #334155;
   --theme-text-muted: #64748B;
   --theme-text-inverse: #FFFFFF;
   --theme-text-link: #475569;

   /* Borders */
   --theme-border-strong: #334155;
   --theme-border-normal: #94A3B8;
   --theme-border-light: #CBD5E1;
   --theme-border-focus: #FFD700;

   /* Accents */
   --theme-accent-primary: #FFD700;
   --theme-accent-secondary: #475569;
   --theme-accent-hover: #E6C200;

   /* Shadows */
   --theme-shadow-color: rgba(51, 65, 85, 0.6);
   --theme-shadow-btn: 4px 4px 0px #334155;
   --theme-shadow-btn-hover: 4px 4px 0px #334155;
   --theme-shadow-card-hover: 4px 4px 0 #334155;

   /* Cobalt family → Slate family */
   --color-cobalt: #475569;
   --color-cobalt-deep: #0F172A;
   --color-cobalt-light: #94A3B8;
   --color-cobalt-pale: #CBD5E1;
   --color-cobalt-wash: #F8FAFC;

   /* Tags */
   --color-tag-bg: #475569;
   --color-tag-text: #F8FAFC;


   /* Status */
   --status-good-bg: #F8FAFC;
   --status-good-text: #334155;

   /* Icon colors - Slate blue-gray themed */
   --theme-icon-color: #334155;
   /* Slate icons */
   --theme-icon-color-active: var(--color-white);

   /* Icon/Button/Active theming */
   --theme-dots-color: #64748B;
   --theme-dots-bg: #CBD5E1;
   --theme-btn-bg: #F8FAFC;
   --theme-btn-bg-hover: #CBD5E1;
   --theme-active-bg: #0F172A;
   --theme-active-text: #FFFFFF;
   --theme-selected-ink: #FFD700;
}


/* ==========================================================================
   THEME: BUDAPEST
   Pink pastels - Grand Budapest Hotel aesthetic
   ========================================================================== */
[data-theme="budapest"] {
   --theme-header-bg: #FDF0E8;
   /* Budapest pink */
   --theme-header-dots-opacity: 0.15;

   /* Backgrounds */
   --theme-bg-app: #FAF0F0;
   --theme-bg-panel: #F8E8E8;
   --theme-bg-surface: #FDF5F5;
   --theme-bg-input: #FFFFFF;
   --theme-bg-hover: #F2D9D9;
   --theme-bg-active: #4A3728;
   --theme-bg-highlight: #F2D9D9;
   --theme-bg-preview: #FDF5F5;

   /* Text */
   --theme-text-primary: #4A3728;
   --theme-text-secondary: #6B5444;
   --theme-text-muted: #9B8070;
   --theme-text-inverse: #FFFFFF;
   --theme-text-link: #9B6B6B;

   /* Borders */
   --theme-border-strong: #4A3728;
   --theme-border-normal: #D4A5A5;
   --theme-border-light: #F2D9D9;
   --theme-border-focus: #E8B4B4;

   /* Accents */
   --theme-accent-primary: #E8B4B4;
   --theme-accent-secondary: #9B6B6B;
   --theme-accent-hover: #F0C8C8;

   /* Shadows */
   --theme-shadow-color: rgba(74, 55, 40, 0.6);
   --theme-shadow-btn: 4px 4px 0px #4A3728;
   --theme-shadow-btn-hover: 4px 4px 0px #4A3728;
   --theme-shadow-card-hover: 4px 4px 0 #4A3728;

   /* Cobalt family → Pink/Mauve family */
   --color-cobalt: #9B6B6B;
   --color-cobalt-deep: #4A3728;
   --color-cobalt-light: #D4A5A5;
   --color-cobalt-pale: #F2D9D9;
   --color-cobalt-wash: #FAF0F0;

   /* Tags */
   --color-tag-bg: #4A3728;
   --color-tag-text: #FFFFFF;


   /* Status */
   --status-good-bg: #FAF0F0;
   --status-good-text: #4A3728;

   /* Icon colors - Pink/mauve themed */
   --theme-icon-color: #4A3728;
   /* Warm brown icons */
   --theme-icon-color-active: var(--color-white);

   /* Icon/Button/Active theming */
   --theme-dots-color: #9B8070;
   --theme-dots-bg: #F2D9D9;
   --theme-btn-bg: #FDF5F5;
   --theme-btn-bg-hover: #F2D9D9;
   --theme-active-bg: #4A3728;
   --theme-active-text: #FFFFFF;
   --theme-selected-ink: #D4A5A5;
}


/* ==========================================================================
   THEME: AMELIE
   Olive green and red - French café nostalgic warmth
   ========================================================================== */
[data-theme="amelie"] {
   --theme-header-bg: #F5F0E5;
   /* Amelie olive */
   --theme-header-dots-opacity: 0.15;

   /* Backgrounds */
   --theme-bg-app: #F5EEE0;
   --theme-bg-panel: #EDE6D8;
   --theme-bg-surface: #FAF7F0;
   --theme-bg-input: #FFFFFF;
   --theme-bg-hover: #E8DCC8;
   --theme-bg-active: #5B3A29;
   --theme-bg-highlight: #E8DCC8;
   --theme-bg-preview: #FAF7F0;

   /* Text */
   --theme-text-primary: #3A2A1A;
   --theme-text-secondary: #5B3A29;
   --theme-text-muted: #8B6A5A;
   --theme-text-inverse: #FFFFFF;
   --theme-text-link: #8B9A46;

   /* Borders */
   --theme-border-strong: #5B3A29;
   --theme-border-normal: #C4D080;
   --theme-border-light: #E8DCC8;
   --theme-border-focus: #8B9A46;

   /* Accents */
   --theme-accent-primary: #8B9A46;
   --theme-accent-secondary: #8B9A46;
   --theme-accent-hover: #A4B35F;

   /* Shadows */
   --theme-shadow-color: rgba(91, 58, 41, 0.6);
   --theme-shadow-btn: 4px 4px 0px #5B3A29;
   --theme-shadow-btn-hover: 4px 4px 0px #5B3A29;
   --theme-shadow-card-hover: 4px 4px 0 #5B3A29;

   /* Cobalt family → Olive family */
   --color-cobalt: #8B9A46;
   --color-cobalt-deep: #5B3A29;
   --color-cobalt-light: #C4D080;
   --color-cobalt-pale: #E8DCC8;
   --color-cobalt-wash: #F5EEE0;

   /* Tags */
   --color-tag-bg: #5B3A29;
   --color-tag-text: #F5EEE0;


   /* Status */
   --status-good-bg: #F5EEE0;
   --status-good-text: #5B3A29;

   /* Icon colors - Olive/brown themed */
   --theme-icon-color: #5B3A29;
   /* Warm brown icons */
   --theme-icon-color-active: var(--color-white);

   /* Icon/Button/Active theming */
   --theme-dots-color: #8B6A5A;
   --theme-dots-bg: #E8DCC8;
   --theme-btn-bg: #FAF7F0;
   --theme-btn-bg-hover: #E8DCC8;
   --theme-active-bg: #5B3A29;
   --theme-active-text: #FFFFFF;
   --theme-selected-ink: #C4D080;
}


/* ==========================================================================
   THEME: GHIBLI
   Studio Ghibli magic - Sky blue and grass green
   ========================================================================== */
[data-theme="ghibli"] {
   --theme-header-bg: #E8F0F5;
   /* Ghibli sky */
   --theme-header-dots-opacity: 0.12;

   /* Backgrounds */
   --theme-bg-app: #E8F4F8;
   --theme-bg-panel: #E0F4FF;
   --theme-bg-surface: #F0FAFF;
   --theme-bg-input: #FFFFFF;
   --theme-bg-hover: #C8E8F5;
   --theme-bg-active: #1E3A5F;
   --theme-bg-highlight: #E0F4FF;
   --theme-bg-preview: #F0FAFF;

   /* Text */
   --theme-text-primary: #1E3A5F;
   --theme-text-secondary: #3D5A7F;
   --theme-text-muted: #6A8AAF;
   --theme-text-inverse: #FFFFFF;
   --theme-text-link: #4169E1;

   /* Borders */
   --theme-border-strong: #1E3A5F;
   --theme-border-normal: #87CEEB;
   --theme-border-light: #E0F4FF;
   --theme-border-focus: #4169E1;

   /* Accents */
   --theme-accent-primary: #4169E1;
   --theme-accent-secondary: #4169E1;
   --theme-accent-hover: #5A82F5;

   /* Shadows */
   --theme-shadow-color: rgba(30, 58, 95, 0.5);
   --theme-shadow-btn: 4px 4px 0px #1E3A5F;
   --theme-shadow-btn-hover: 4px 4px 0px #1E3A5F;
   --theme-shadow-card-hover: 4px 4px 0 #1E3A5F;

   /* Cobalt family → Sky family */
   --color-cobalt: #4169E1;
   --color-cobalt-deep: #1E3A5F;
   --color-cobalt-light: #87CEEB;
   --color-cobalt-pale: #E0F4FF;
   --color-cobalt-wash: #F0FAFF;

   /* Tags */
   --color-tag-bg: #1E3A5F;
   --color-tag-text: #FFFFFF;


   /* Status */
   --status-good-bg: #F0FAFF;
   --status-good-text: #1E3A5F;

   /* Icon colors - Sky blue themed */
   --theme-icon-color: #1E3A5F;
   /* Deep sky blue icons */
   --theme-icon-color-active: var(--color-white);

   /* Icon/Button/Active theming */
   --theme-dots-color: #6A8AAF;
   --theme-dots-bg: #C8E8F5;
   --theme-btn-bg: #F0FAFF;
   --theme-btn-bg-hover: #C8E8F5;
   --theme-active-bg: #1E3A5F;
   --theme-active-text: #FFFFFF;
   --theme-selected-ink: #90EE90;
}


/* ==========================================================================
   THEME: HOKUSAI WAVE
   Japanese woodblock - Deep indigo and wave blue
   ========================================================================== */
[data-theme="hokusai"] {
   --theme-header-bg: #E8F0F5;
   /* Hokusai wave */
   --theme-header-dots-opacity: 0.18;

   /* Backgrounds */
   --theme-bg-app: #F8F6F0;
   --theme-bg-panel: #F0EEE6;
   --theme-bg-surface: #FDFCF8;
   --theme-bg-input: #FFFFFF;
   --theme-bg-hover: #E6F0F5;
   --theme-bg-active: #1B4D7A;
   --theme-bg-highlight: #E6F0F5;
   --theme-bg-preview: #FDFCF8;

   /* Text */
   --theme-text-primary: #0D2842;
   --theme-text-secondary: #1B4D7A;
   --theme-text-muted: #4A7A9B;
   --theme-text-inverse: #FFFFFF;
   --theme-text-link: #1B4D7A;

   /* Borders */
   --theme-border-strong: #1B4D7A;
   --theme-border-normal: #4A90B8;
   --theme-border-light: #B8D4E8;
   --theme-border-focus: #2E86AB;

   /* Accents - Wave blue */
   --theme-accent-primary: #2E86AB;
   --theme-accent-secondary: #2C6396;
   --theme-accent-hover: #247A9B;

   /* Shadows */
   --theme-shadow-color: rgba(27, 77, 122, 0.6);
   --theme-shadow-btn: 4px 4px 0px #1B4D7A;
   --theme-shadow-btn-hover: 4px 4px 0px #1B4D7A;
   --theme-shadow-card-hover: 4px 4px 0 #1B4D7A;

   /* Cobalt family → Indigo family */
   --color-cobalt: #2E86AB;
   --color-cobalt-deep: #0D2842;
   --color-cobalt-light: #4A90B8;
   --color-cobalt-pale: #B8D4E8;
   --color-cobalt-wash: #F8F6F0;

   /* Tags */
   --color-tag-bg: #1B4D7A;
   --color-tag-text: #FFFFFF;


   /* Status */
   --status-good-bg: #F8F6F0;
   --status-good-text: #1B4D7A;

   /* Icon colors - Japanese indigo themed */
   --theme-icon-color: #1B4D7A;
   /* Deep indigo icons */
   --theme-icon-color-active: var(--color-white);

   /* Icon/Button/Active theming */
   --theme-dots-color: #4A7A9B;
   --theme-dots-bg: #E6F0F5;
   --theme-btn-bg: #FDFCF8;
   --theme-btn-bg-hover: #E6F0F5;
   --theme-active-bg: #1B4D7A;
   --theme-active-text: #FFFFFF;
   --theme-selected-ink: #B8D4E8;
}


/* ==========================================================================
   THEME: AMIGA WORKBENCH
   Classic Amiga - Orange and blue 4-color palette
   ========================================================================== */
[data-theme="amiga"] {
   --theme-header-bg: #E0E8F0;
   /* Amiga blue */
   --theme-header-dots-opacity: 0.20;

   /* Backgrounds */
   --theme-bg-app: #FFFFFF;
   --theme-bg-panel: #CCCCCC;
   --theme-bg-surface: #DDDDDD;
   --theme-bg-input: #FFFFFF;
   --theme-bg-hover: #888888;
   --theme-bg-active: #0055AA;
   --theme-bg-highlight: #FF8800;
   --theme-bg-preview: #DDDDDD;

   /* Text */
   --theme-text-primary: #000000;
   --theme-text-secondary: #333333;
   --theme-text-muted: #666666;
   --theme-text-inverse: #FFFFFF;
   --theme-text-link: #0055AA;

   /* Borders */
   --theme-border-strong: #000000;
   --theme-border-normal: #555555;
   --theme-border-light: #888888;
   --theme-border-focus: #FF8800;

   /* Accents */
   --theme-accent-primary: #FF8800;
   --theme-accent-secondary: #0055AA;
   --theme-accent-hover: #FFA033;

   /* Shadows */
   --theme-shadow-color: rgba(0, 0, 0, 0.8);
   --theme-shadow-btn: 2px 2px 0px #000000;
   --theme-shadow-btn-hover: 2px 2px 0px #000000;
   --theme-shadow-card-hover: 2px 2px 0 #000000;

   /* Cobalt family → Amiga Blue family */
   --color-cobalt: #0055AA;
   --color-cobalt-deep: #002266;
   --color-cobalt-light: #5588CC;
   --color-cobalt-pale: #AAAAAA;
   --color-cobalt-wash: #CCCCCC;

   /* Tags */
   --color-tag-bg: #0055AA;
   --color-tag-text: #FFFFFF;


   /* Status */
   --status-good-bg: #AAAAAA;
   --status-good-text: #000000;

   /* Icon colors - Amiga blue themed */
   --theme-icon-color: #000000;
   /* Black icons (classic look) */
   --theme-icon-color-active: var(--color-white);

   /* Icon/Button/Active theming */
   --theme-dots-color: #666666;
   --theme-dots-bg: #888888;
   --theme-btn-bg: #DDDDDD;
   --theme-btn-bg-hover: #888888;
   --theme-active-bg: #0055AA;
   --theme-active-text: #FFFFFF;
   --theme-selected-ink: #FF8800;
}


/* ==========================================================================
   THEME: BEOS
   Yellow tabs! - BeOS signature style
   ========================================================================== */
[data-theme="beos"] {
   --theme-header-bg: #EAEAF0;
   /* BeOS gray */
   --theme-header-dots-opacity: 0.15;

   /* Backgrounds */
   --theme-bg-app: #FFFFFF;
   --theme-bg-panel: #E8E4DC;
   --theme-bg-surface: #F0ECE4;
   --theme-bg-input: #FFFFFF;
   --theme-bg-hover: #C8C4BC;
   --theme-bg-active: #4A4A4A;
   --theme-bg-highlight: #FFCC00;
   --theme-bg-preview: #F0ECE4;

   /* Text */
   --theme-text-primary: #000000;
   --theme-text-secondary: #4A4A4A;
   --theme-text-muted: #8A8A8A;
   --theme-text-inverse: #FFFFFF;
   --theme-text-link: #0055AA;

   /* Borders */
   --theme-border-strong: #000000;
   --theme-border-normal: #8A8A8A;
   --theme-border-light: #C8C4BC;
   --theme-border-focus: #FFCC00;

   /* Accents */
   --theme-accent-primary: #FFCC00;
   --theme-accent-secondary: #4A4A4A;
   --theme-accent-hover: #E6B800;

   /* Shadows */
   --theme-shadow-color: rgba(0, 0, 0, 0.6);
   --theme-shadow-btn: 2px 2px 0px #000000;
   --theme-shadow-btn-hover: 2px 2px 0px #000000;
   --theme-shadow-card-hover: 2px 2px 0 #000000;

   /* Cobalt family → BeOS gray family */
   --color-cobalt: #4A4A4A;
   --color-cobalt-deep: #2A2A2A;
   --color-cobalt-light: #8A8A8A;
   --color-cobalt-pale: #D4D0C8;
   --color-cobalt-wash: #E8E4DC;

   /* Tags */
   --color-tag-bg: #4A4A4A;
   --color-tag-text: #FFFFFF;


   /* Status */
   --status-good-bg: #D4D0C8;
   --status-good-text: #000000;

   /* Icon colors - BeOS gray themed */
   --theme-icon-color: #000000;
   /* Black icons (classic look) */
   --theme-icon-color-active: var(--color-white);

   /* Icon/Button/Active theming */
   --theme-dots-color: #8A8A8A;
   --theme-dots-bg: #C8C4BC;
   --theme-btn-bg: #F0ECE4;
   --theme-btn-bg-hover: #C8C4BC;
   --theme-active-bg: #4A4A4A;
   --theme-active-text: #FFFFFF;
   --theme-selected-ink: #FFCC00;
}


/* ==========================================================================
   THEME: LEMON LAVENDER
   Soft and dreamy - Yellow with purple accents
   ========================================================================== */
[data-theme="lemon-lavender"] {
   --theme-header-bg: #F5F0F8;
   /* Lemon lavender */
   --theme-header-dots-opacity: 0.12;

   /* Backgrounds */
   --theme-bg-app: #F5F0FF;
   --theme-bg-panel: #EDE8FA;
   --theme-bg-surface: #FAF8FF;
   --theme-bg-input: #FFFFFF;
   --theme-bg-hover: #E6E0F5;
   --theme-bg-active: #5B4B8A;
   --theme-bg-highlight: #E6E6FA;
   --theme-bg-preview: #FAF8FF;

   /* Text */
   --theme-text-primary: #3A2A5A;
   --theme-text-secondary: #5B4B8A;
   --theme-text-muted: #8A7AB0;
   --theme-text-inverse: #FFFFFF;
   --theme-text-link: #9370DB;

   /* Borders */
   --theme-border-strong: #5B4B8A;
   --theme-border-normal: #B8A5E8;
   --theme-border-light: #E6E6FA;
   --theme-border-focus: #B19CD9;

   /* Accents */
   --theme-accent-primary: #B19CD9;
   --theme-accent-secondary: #9370DB;
   --theme-accent-hover: #C4B3E3;

   /* Shadows */
   --theme-shadow-color: rgba(91, 75, 138, 0.5);
   --theme-shadow-btn: 4px 4px 0px #5B4B8A;
   --theme-shadow-btn-hover: 4px 4px 0px #5B4B8A;
   --theme-shadow-card-hover: 4px 4px 0 #5B4B8A;

   /* Cobalt family → Lavender family */
   --color-cobalt: #9370DB;
   --color-cobalt-deep: #5B4B8A;
   --color-cobalt-light: #B8A5E8;
   --color-cobalt-pale: #E6E6FA;
   --color-cobalt-wash: #F5F0FF;

   /* Tags */
   --color-tag-bg: #5B4B8A;
   --color-tag-text: #FFFFFF;


   /* Status */
   --status-good-bg: #F5F0FF;
   --status-good-text: #5B4B8A;

   /* Icon colors - Lavender purple themed */
   --theme-icon-color: #5B4B8A;
   /* Purple icons */
   --theme-icon-color-active: var(--color-white);

   /* Icon/Button/Active theming */
   --theme-dots-color: #8A7AB0;
   --theme-dots-bg: #E6E0F5;
   --theme-btn-bg: #FAF8FF;
   --theme-btn-bg-hover: #E6E0F5;
   --theme-active-bg: #5B4B8A;
   --theme-active-text: #FFFFFF;
   --theme-selected-ink: #DDA0DD;
}


/* ==========================================================================
   THEME: MOONRISE (D1)
   Wes Anderson - Pastoral khaki/sage aesthetic
   ========================================================================== */
[data-theme="moonrise"] {
   --theme-header-bg: #F5F2E8;
   /* Moonrise khaki */
   --theme-header-dots-opacity: 0.15;

   --theme-bg-app: #F5EEE0;
   --theme-bg-panel: #EDE4D4;
   --theme-bg-surface: #FAF6EE;
   --theme-bg-input: #FFFFFF;
   --theme-bg-hover: #E8DCC8;
   --theme-bg-active: #5C4A32;
   --theme-bg-highlight: #E8D5B5;
   --theme-bg-preview: #F5EEE0;

   --theme-text-primary: #3A3020;
   --theme-text-secondary: #5C4A32;
   --theme-text-muted: #8A7A60;
   --theme-text-inverse: #FFFFFF;
   --theme-text-link: #7B8B6F;

   --theme-border-strong: #5C4A32;
   --theme-border-normal: #C9A86C;
   --theme-border-light: #E8D5B5;
   --theme-border-focus: #7B8B6F;

   --theme-accent-primary: #7B8B6F;
   --theme-accent-secondary: #7B8B6F;
   --theme-accent-hover: #94A488;

   --theme-shadow-color: rgba(92, 74, 50, 0.5);
   --theme-shadow-btn: 4px 4px 0px #5C4A32;
   --theme-shadow-btn-hover: 4px 4px 0px #5C4A32;
   --theme-shadow-card-hover: 4px 4px 0 #5C4A32;

   --color-cobalt: #7B8B6F;
   --color-cobalt-deep: #5C4A32;
   --color-cobalt-light: #A8B89C;
   --color-cobalt-pale: #D4C4A8;
   --color-cobalt-wash: #F5EEE0;

   --color-tag-bg: #7B8B6F;
   --color-tag-text: #FFFFFF;

   --mode-nano: #E8D5B5;
   --mode-nano-text: #5C4A32;
   --mode-glyph: #D4C4A8;
   --mode-glyph-text: #5C4A32;
   --mode-icon: #FFD700;
   --mode-icon-text: #000000;
   --mode-icon-bw: #D4C4A8;
   --mode-icon-bw-text: #5C4A32;
   --mode-icon-plus: #7B8B6F;
   --mode-icon-plus-text: #FFFFFF;
   --mode-real: #5C4A32;
   --mode-real-text: #FFFFFF;
   --mode-morph: #7B8B6F;
   --mode-morph-text: #FFFFFF;
   --mode-family: #7B8B6F;
   --mode-family-text: #FFFFFF;

   --theme-icon-color: #5C4A32;
   --theme-dots-color: #A8B89C;
   --theme-dots-bg: #E8DCC8;
   --theme-btn-bg: #FAF6EE;
   --theme-btn-bg-hover: #E8DCC8;
   --theme-active-bg: #5C4A32;
   --theme-active-text: #FFFFFF;
   --theme-selected-ink: #C9A86C;
}


/* ==========================================================================
   THEME: KUBRICK (D4)
   Kubrick - Clockwork Orange stark white/orange/black
   ========================================================================== */
[data-theme="kubrick"] {
   --theme-header-bg: #F5F5F5;
   /* Kubrick white */
   --theme-header-dots-opacity: 0.15;

   --theme-bg-app: #FFFFFF;
   --theme-bg-panel: #F5F5F5;
   --theme-bg-surface: #FFFFFF;
   --theme-bg-input: #FFFFFF;
   --theme-bg-hover: #EEEEEE;
   --theme-bg-active: #1A1A1A;
   --theme-bg-highlight: #FFF3E0;
   --theme-bg-preview: #FFFFFF;

   --theme-text-primary: #1A1A1A;
   --theme-text-secondary: #333333;
   --theme-text-muted: #666666;
   --theme-text-inverse: #FFFFFF;
   --theme-text-link: #FF4500;

   --theme-border-strong: #000000;
   --theme-border-normal: #1A1A1A;
   --theme-border-light: #CCCCCC;
   --theme-border-focus: #FF4500;

   --theme-accent-primary: #FF4500;
   --theme-accent-secondary: #FF4500;
   --theme-accent-hover: #FF6B3D;

   --theme-shadow-color: rgba(0, 0, 0, 0.8);
   --theme-shadow-btn: 4px 4px 0px #000000;
   --theme-shadow-btn-hover: 4px 4px 0px #000000;
   --theme-shadow-card-hover: 4px 4px 0 #000000;

   --color-cobalt: #FF4500;
   --color-cobalt-deep: #1A1A1A;
   --color-cobalt-light: #FF7043;
   --color-cobalt-pale: #FFCCBC;
   --color-cobalt-wash: #FFFFFF;

   --color-tag-bg: #1A1A1A;
   --color-tag-text: #FFFFFF;

   --mode-nano: #FFFFFF;
   --mode-nano-text: #000000;
   --mode-glyph: #EEEEEE;
   --mode-glyph-text: #000000;
   --mode-icon: #FFD700;
   --mode-icon-text: #000000;
   --mode-icon-bw: #EEEEEE;
   --mode-icon-bw-text: #000000;
   --mode-icon-plus: #FF4500;
   --mode-icon-plus-text: #FFFFFF;
   --mode-real: #1A1A1A;
   --mode-real-text: #FFFFFF;
   --mode-morph: #FF4500;
   --mode-morph-text: #FFFFFF;
   --mode-family: #FF4500;
   --mode-family-text: #FFFFFF;

   --theme-icon-color: #1A1A1A;
   --theme-dots-color: #CCCCCC;
   --theme-dots-bg: #EEEEEE;
   --theme-btn-bg: #FFFFFF;
   --theme-btn-bg-hover: #EEEEEE;
   --theme-active-bg: #1A1A1A;
   --theme-active-text: #FFFFFF;
   --theme-selected-ink: #FF4500;
}


/* ==========================================================================
   THEME: DUNE (D6)
   Villeneuve - Desert sand/earth tones
   ========================================================================== */
[data-theme="dune"] {
   --theme-header-bg: #F8F0E5;
   /* Dune sand */
   --theme-header-dots-opacity: 0.15;

   --theme-bg-app: #F0E6D3;
   --theme-bg-panel: #E8DCC8;
   --theme-bg-surface: #F5EEE0;
   --theme-bg-input: #FFFFFF;
   --theme-bg-hover: #D4C4A0;
   --theme-bg-active: #4A4A4A;
   --theme-bg-highlight: #C9A86C;
   --theme-bg-preview: #F0E6D3;

   --theme-text-primary: #3A3020;
   --theme-text-secondary: #5C4A32;
   --theme-text-muted: #8B7355;
   --theme-text-inverse: #FFFFFF;
   --theme-text-link: #8B7355;

   --theme-border-strong: #5C4A32;
   --theme-border-normal: #8B7355;
   --theme-border-light: #C9A86C;
   --theme-border-focus: #C9A86C;

   --theme-accent-primary: #C9A86C;
   --theme-accent-secondary: #8B7355;
   --theme-accent-hover: #D9BC85;

   --theme-shadow-color: rgba(92, 74, 50, 0.5);
   --theme-shadow-btn: 4px 4px 0px #5C4A32;
   --theme-shadow-btn-hover: 4px 4px 0px #5C4A32;
   --theme-shadow-card-hover: 4px 4px 0 #5C4A32;

   --color-cobalt: #8B7355;
   --color-cobalt-deep: #4A4A4A;
   --color-cobalt-light: #C9A86C;
   --color-cobalt-pale: #D4C4A0;
   --color-cobalt-wash: #F0E6D3;

   --color-tag-bg: #5C4A32;
   --color-tag-text: #F0E6D3;

   --mode-nano: #E8DCC8;
   --mode-nano-text: #5C4A32;
   --mode-glyph: #D4C4A0;
   --mode-glyph-text: #5C4A32;
   --mode-icon: #FFD700;
   --mode-icon-text: #000000;
   --mode-icon-bw: #D4C4A0;
   --mode-icon-bw-text: #5C4A32;
   --mode-icon-plus: #8B7355;
   --mode-icon-plus-text: #FFFFFF;
   --mode-real: #4A4A4A;
   --mode-real-text: #FFFFFF;
   --mode-morph: #8B7355;
   --mode-morph-text: #FFFFFF;
   --mode-family: #8B7355;
   --mode-family-text: #FFFFFF;

   --theme-icon-color: #5C4A32;
   --theme-dots-color: #C9A86C;
   --theme-dots-bg: #D4C4A0;
   --theme-btn-bg: #F5EEE0;
   --theme-btn-bg-hover: #D4C4A0;
   --theme-active-bg: #4A4A4A;
   --theme-active-text: #FFFFFF;
   --theme-selected-ink: #C9A86C;
}


/* ==========================================================================
   THEME: WONG-KAR-WAI (D10)
   In the Mood - Romantic crimson/teal
   ========================================================================== */
[data-theme="wong-kar-wai"] {
   --theme-header-bg: #FFF8F0;
   /* Wong Kar-Wai warm */
   --theme-header-dots-opacity: 0.12;

   --theme-bg-app: #FFF8F0;
   --theme-bg-panel: #FFE4D6;
   --theme-bg-surface: #FFFAF5;
   --theme-bg-input: #FFFFFF;
   --theme-bg-hover: #F0C8C8;
   --theme-bg-active: #008080;
   /* TEAL active */
   --theme-bg-highlight: #FFE4D6;
   --theme-bg-preview: #FFF8F0;

   --theme-text-primary: #2A2020;
   --theme-text-secondary: #4A4A4A;
   --theme-text-muted: #6B5A5A;
   --theme-text-inverse: #FFFFFF;
   --theme-text-link: #DC143C;

   --theme-border-strong: #4A4A4A;
   --theme-border-normal: #DC143C;
   --theme-border-light: #F0C8C8;
   --theme-border-focus: #FFD700;

   --theme-accent-primary: #DC143C;
   /* Crimson */
   --theme-accent-secondary: #008080;
   /* Teal */
   --theme-accent-hover: #C91230;

   --theme-shadow-color: rgba(220, 20, 60, 0.3);
   --theme-shadow-btn: 4px 4px 0px #4A4A4A;
   --theme-shadow-btn-hover: 4px 4px 0px #4A4A4A;
   --theme-shadow-card-hover: 4px 4px 0 #4A4A4A;

   --color-cobalt: #DC143C;
   --color-cobalt-deep: #008080;
   --color-cobalt-light: #FF6B6B;
   --color-cobalt-pale: #FFE4D6;
   --color-cobalt-wash: #FFF8F0;

   --color-tag-bg: #4A4A4A;
   --color-tag-text: #FFFFFF;

   --mode-nano: #FFE4D6;
   --mode-nano-text: #8B0000;
   --mode-glyph: #F0C8C8;
   --mode-glyph-text: #8B0000;
   --mode-icon: #DC143C;
   --mode-icon-text: #FFFFFF;
   --mode-icon-bw: #F0C8C8;
   --mode-icon-bw-text: #8B0000;
   --mode-icon-plus: #DC143C;
   --mode-icon-plus-text: #FFFFFF;
   --mode-real: #008080;
   --mode-real-text: #FFFFFF;
   --mode-morph: #DC143C;
   --mode-morph-text: #FFFFFF;
   --mode-family: #DC143C;
   --mode-family-text: #FFFFFF;

   --theme-icon-color: #4A4A4A;
   --theme-dots-color: #DC143C;
   --theme-dots-bg: #F0C8C8;
   --theme-btn-bg: #FFFAF5;
   --theme-btn-bg-hover: #F0C8C8;
   --theme-active-bg: #008080;
   /* TEAL active */
   --theme-active-text: #FFFFFF;
   --theme-selected-ink: #FFD700;
   /* Gold */
}


/* ==========================================================================
   THEME: KLIMT (A2)
   Gold Leaf - Opulent gold/bronze/umber
   ========================================================================== */
[data-theme="klimt"] {
   --theme-header-bg: #FAF5E8;
   /* Klimt gold */
   --theme-header-dots-opacity: 0.15;

   --theme-bg-app: #FBF7ED;
   --theme-bg-panel: #F5E6C8;
   --theme-bg-surface: #FFFBF5;
   --theme-bg-input: #FFFFFF;
   --theme-bg-hover: #E8D4A8;
   --theme-bg-active: #4A3728;
   --theme-bg-highlight: #B8860B;
   --theme-bg-preview: #FBF7ED;

   --theme-text-primary: #2A2018;
   --theme-text-secondary: #4A3728;
   --theme-text-muted: #6B5A45;
   --theme-text-inverse: #FFFFFF;
   --theme-text-link: #B8860B;

   --theme-border-strong: #4A3728;
   --theme-border-normal: #B8860B;
   --theme-border-light: #E8D4A8;
   --theme-border-focus: #FFD700;

   --theme-accent-primary: #FFD700;
   --theme-accent-secondary: #B8860B;
   --theme-accent-hover: #E6C200;

   --theme-shadow-color: rgba(74, 55, 40, 0.5);
   --theme-shadow-btn: 4px 4px 0px #4A3728;
   --theme-shadow-btn-hover: 4px 4px 0px #4A3728;
   --theme-shadow-card-hover: 4px 4px 0 #4A3728;

   --color-cobalt: #B8860B;
   --color-cobalt-deep: #4A3728;
   --color-cobalt-light: #DAA520;
   --color-cobalt-pale: #F5E6C8;
   --color-cobalt-wash: #FBF7ED;

   --color-tag-bg: #4A3728;
   --color-tag-text: #FFD700;

   --mode-nano: #F5E6C8;
   --mode-nano-text: #4A3728;
   --mode-glyph: #E8D4A8;
   --mode-glyph-text: #4A3728;
   --mode-icon: #FFD700;
   --mode-icon-text: #000000;
   --mode-icon-bw: #E8D4A8;
   --mode-icon-bw-text: #4A3728;
   --mode-icon-plus: #B8860B;
   --mode-icon-plus-text: #FFFFFF;
   --mode-real: #4A3728;
   --mode-real-text: #FFD700;
   --mode-morph: #B8860B;
   --mode-morph-text: #FFFFFF;
   --mode-family: #B8860B;
   --mode-family-text: #FFFFFF;

   --theme-icon-color: #4A3728;
   --theme-dots-color: #B8860B;
   --theme-dots-bg: #E8D4A8;
   --theme-btn-bg: #FFFBF5;
   --theme-btn-bg-hover: #E8D4A8;
   --theme-active-bg: #4A3728;
   --theme-active-text: #FFD700;
   --theme-selected-ink: #B8860B;
}


/* ==========================================================================
   THEME: MONDRIAN (A3)
   De Stijl - Primary colors with heavy black grid
   ========================================================================== */
[data-theme="mondrian"] {
   --theme-header-bg: #F8F8F8;
   /* Mondrian white */
   --theme-header-dots-opacity: 0.15;

   --theme-bg-app: #FFFFFF;
   --theme-bg-panel: #F5F5F5;
   --theme-bg-surface: #FFFFFF;
   --theme-bg-input: #FFFFFF;
   --theme-bg-hover: #E8E8E8;
   --theme-bg-active: #E31C23;
   /* RED active */
   --theme-bg-highlight: #FFD700;
   --theme-bg-preview: #FFFFFF;

   --theme-text-primary: #000000;
   --theme-text-secondary: #1A1A1A;
   --theme-text-muted: #4A4A4A;
   --theme-text-inverse: #FFFFFF;
   --theme-text-link: #003399;

   --theme-border-strong: #000000;
   --theme-border-normal: #000000;
   --theme-border-light: #CCCCCC;
   --theme-border-focus: #003399;

   --theme-accent-primary: #003399;
   /* Blue */
   --theme-accent-secondary: #FFD700;
   /* Yellow */
   --theme-accent-hover: #4A6BC7;
   --theme-accent-text: #FFFFFF;
   /* White text on dark blue */

   --theme-shadow-color: rgba(0, 0, 0, 0.8);
   --theme-shadow-btn: 3px 3px 0px #000000;
   --theme-shadow-btn-hover: 3px 3px 0px #000000;
   --theme-shadow-card-hover: 3px 3px 0 #000000;

   --color-cobalt: #003399;
   --color-cobalt-deep: #000000;
   --color-cobalt-light: #4A90D9;
   --color-cobalt-pale: #D4E4F4;
   --color-cobalt-wash: #FFFFFF;

   --color-tag-bg: #000000;
   --color-tag-text: #FFFFFF;

   --mode-nano: #FFFFFF;
   --mode-nano-text: #000000;
   --mode-glyph: #E8E8E8;
   --mode-glyph-text: #000000;
   --mode-icon: #FFD700;
   --mode-icon-text: #000000;
   --mode-icon-bw: #E8E8E8;
   --mode-icon-bw-text: #000000;
   --mode-icon-plus: #003399;
   /* Blue */
   --mode-icon-plus-text: #FFFFFF;
   --mode-real: #E31C23;
   /* Red */
   --mode-real-text: #FFFFFF;
   --mode-morph: #E31C23;
   --mode-morph-text: #FFFFFF;
   --mode-family: #003399;
   --mode-family-text: #FFFFFF;

   --theme-icon-color: #000000;
   --theme-dots-color: #CCCCCC;
   --theme-dots-bg: #E8E8E8;
   --theme-btn-bg: #FFFFFF;
   --theme-btn-bg-hover: #E8E8E8;
   --theme-active-bg: #E31C23;
   /* RED active */
   --theme-active-text: #FFFFFF;
   --theme-selected-ink: #FFD700;
   /* Yellow ink */
}


/* ==========================================================================
   THEME: MONET (A4)
   Waterlilies - Soft impressionist pastels
   ========================================================================== */
[data-theme="monet"] {
   --theme-header-bg: #F0F5F8;
   /* Monet water */
   --theme-header-dots-opacity: 0.12;

   --theme-bg-app: #F5FAFD;
   --theme-bg-panel: #E8F4F8;
   --theme-bg-surface: #FAFEFF;
   --theme-bg-input: #FFFFFF;
   --theme-bg-hover: #C8E0E8;
   --theme-bg-active: #6B8E8E;
   --theme-bg-highlight: #B4D4E8;
   --theme-bg-preview: #F5FAFD;

   --theme-text-primary: #2A3A3A;
   --theme-text-secondary: #4A6B7C;
   --theme-text-muted: #6B8B9B;
   --theme-text-inverse: #FFFFFF;
   --theme-text-link: #8FBC8F;

   --theme-border-strong: #4A6B7C;
   --theme-border-normal: #8FBC8F;
   --theme-border-light: #C8E0E8;
   --theme-border-focus: #9DC8C8;

   --theme-accent-primary: #9DC8C8;
   --theme-accent-secondary: #8FBC8F;
   --theme-accent-hover: #B5D8D8;

   --theme-shadow-color: rgba(74, 107, 124, 0.3);
   --theme-shadow-btn: 4px 4px 0px #4A6B7C;
   --theme-shadow-btn-hover: 4px 4px 0px #4A6B7C;
   --theme-shadow-card-hover: 4px 4px 0 #4A6B7C;

   --color-cobalt: #8FBC8F;
   --color-cobalt-deep: #6B8E8E;
   --color-cobalt-light: #B4D4E8;
   --color-cobalt-pale: #E8F4F8;
   --color-cobalt-wash: #F5FAFD;

   --color-tag-bg: #6B8E8E;
   --color-tag-text: #FFFFFF;

   --mode-nano: #E8F4F8;
   --mode-nano-text: #4A6B7C;
   --mode-glyph: #C8E0E8;
   --mode-glyph-text: #4A6B7C;
   --mode-icon: #FFD700;
   --mode-icon-text: #000000;
   --mode-icon-bw: #C8E0E8;
   --mode-icon-bw-text: #4A6B7C;
   --mode-icon-plus: #8FBC8F;
   --mode-icon-plus-text: #2D4A2D;
   --mode-real: #6B8E8E;
   --mode-real-text: #FFFFFF;
   --mode-morph: #8FBC8F;
   --mode-morph-text: #2D4A2D;
   --mode-family: #8FBC8F;
   --mode-family-text: #2D4A2D;

   --theme-icon-color: #4A6B7C;
   --theme-dots-color: #B4D4E8;
   --theme-dots-bg: #C8E0E8;
   --theme-btn-bg: #FAFEFF;
   --theme-btn-bg-hover: #C8E0E8;
   --theme-active-bg: #6B8E8E;
   --theme-active-text: #FFFFFF;
   --theme-selected-ink: #DDA0DD;
}


/* ==========================================================================
   THEME: ROTHKO (A6)
   Color Field - Deep rust/maroon emotional
   ========================================================================== */
[data-theme="rothko"] {
   --theme-header-bg: #F8EEE5;
   /* Rothko warm */
   --theme-header-dots-opacity: 0.15;

   --theme-bg-app: #FAF5F0;
   --theme-bg-panel: #F5E8D8;
   --theme-bg-surface: #FFFAF5;
   --theme-bg-input: #FFFFFF;
   --theme-bg-hover: #E8C8A8;
   --theme-bg-active: #4A0E2C;
   --theme-bg-highlight: #8B2500;
   --theme-bg-preview: #FAF5F0;

   --theme-text-primary: #2D1A1A;
   --theme-text-secondary: #4A0E2C;
   --theme-text-muted: #6B3A3A;
   --theme-text-inverse: #FFFFFF;
   --theme-text-link: #8B2500;

   --theme-border-strong: #4A0E2C;
   --theme-border-normal: #8B2500;
   --theme-border-light: #E8C8A8;
   --theme-border-focus: #CC4125;

   --theme-accent-primary: #CC4125;
   --theme-accent-secondary: #8B2500;
   --theme-accent-hover: #E05A3D;

   --theme-shadow-color: rgba(74, 14, 44, 0.4);
   --theme-shadow-btn: 4px 4px 0px #4A0E2C;
   --theme-shadow-btn-hover: 4px 4px 0px #4A0E2C;
   --theme-shadow-card-hover: 4px 4px 0 #4A0E2C;

   --color-cobalt: #8B2500;
   --color-cobalt-deep: #4A0E2C;
   --color-cobalt-light: #CD5C5C;
   --color-cobalt-pale: #F5E8D8;
   --color-cobalt-wash: #FAF5F0;

   --color-tag-bg: #4A0E2C;
   --color-tag-text: #F5E8D8;

   --mode-nano: #F5E8D8;
   --mode-nano-text: #4A0E2C;
   --mode-glyph: #E8C8A8;
   --mode-glyph-text: #4A0E2C;
   --mode-icon: #FFD700;
   --mode-icon-text: #000000;
   --mode-icon-bw: #E8C8A8;
   --mode-icon-bw-text: #4A0E2C;
   --mode-icon-plus: #8B2500;
   --mode-icon-plus-text: #FFFFFF;
   --mode-real: #4A0E2C;
   --mode-real-text: #FFFFFF;
   --mode-morph: #8B2500;
   --mode-morph-text: #FFFFFF;
   --mode-family: #8B2500;
   --mode-family-text: #FFFFFF;

   --theme-icon-color: #4A0E2C;
   --theme-dots-color: #8B2500;
   --theme-dots-bg: #E8C8A8;
   --theme-btn-bg: #FFFAF5;
   --theme-btn-bg-hover: #E8C8A8;
   --theme-active-bg: #4A0E2C;
   --theme-active-text: #FFFFFF;
   --theme-selected-ink: #8B2500;
}


/* ==========================================================================
   THEME: HOCKNEY (A7)
   Pool - California sun/pool blue/lawn green
   ========================================================================== */
[data-theme="hockney"] {
   --theme-header-bg: #E8F5FA;
   /* Hockney pool */
   --theme-header-dots-opacity: 0.12;

   --theme-bg-app: #F0FAFF;
   --theme-bg-panel: #D4F4FF;
   --theme-bg-surface: #F8FDFF;
   --theme-bg-input: #FFFFFF;
   --theme-bg-hover: #A8E4F8;
   --theme-bg-active: #006080;
   --theme-bg-highlight: #00B5E2;
   --theme-bg-preview: #F0FAFF;

   --theme-text-primary: #1A3A4A;
   --theme-text-secondary: #006080;
   --theme-text-muted: #4A8A9A;
   --theme-text-inverse: #FFFFFF;
   --theme-text-link: #00B5E2;

   --theme-border-strong: #006080;
   --theme-border-normal: #00B5E2;
   --theme-border-light: #A8E4F8;
   --theme-border-focus: #FF6B8A;

   --theme-accent-primary: #FF6B8A;
   --theme-accent-secondary: #00B5E2;
   --theme-accent-hover: #FF8DA6;

   --theme-shadow-color: rgba(0, 96, 128, 0.4);
   --theme-shadow-btn: 4px 4px 0px #006080;
   --theme-shadow-btn-hover: 4px 4px 0px #006080;
   --theme-shadow-card-hover: 4px 4px 0 #006080;

   --color-cobalt: #00B5E2;
   --color-cobalt-deep: #006080;
   --color-cobalt-light: #5CCDE8;
   --color-cobalt-pale: #D4F4FF;
   --color-cobalt-wash: #F0FAFF;

   --color-tag-bg: #006080;
   --color-tag-text: #D4F4FF;

   --mode-nano: #D4F4FF;
   --mode-nano-text: #006080;
   --mode-glyph: #A8E4F8;
   --mode-glyph-text: #006080;
   --mode-icon: #FFD700;
   --mode-icon-text: #000000;
   --mode-icon-bw: #A8E4F8;
   --mode-icon-bw-text: #006080;
   --mode-icon-plus: #00B5E2;
   --mode-icon-plus-text: #FFFFFF;
   --mode-real: #006080;
   --mode-real-text: #FFFFFF;
   --mode-morph: #00B5E2;
   --mode-morph-text: #FFFFFF;
   --mode-family: #7CB342;
   --mode-family-text: #FFFFFF;

   --theme-icon-color: #006080;
   --theme-dots-color: #5CCDE8;
   --theme-dots-bg: #A8E4F8;
   --theme-btn-bg: #F8FDFF;
   --theme-btn-bg-hover: #A8E4F8;
   --theme-active-bg: #006080;
   --theme-active-text: #FFFFFF;
   --theme-selected-ink: #00B5E2;
}


/* ==========================================================================
   THEME: MATISSE (A8)
   Fauve - Bold red/teal Mediterranean
   ========================================================================== */
[data-theme="matisse"] {
   --theme-header-bg: #E8F5F0;
   /* Matisse teal */
   --theme-header-dots-opacity: 0.12;

   --theme-bg-app: #FEFAE0;
   --theme-bg-panel: #F8F0D0;
   --theme-bg-surface: #FFFEF8;
   --theme-bg-input: #FFFFFF;
   --theme-bg-hover: #E8D8A8;
   --theme-bg-active: #264653;
   --theme-bg-highlight: #E63946;
   --theme-bg-preview: #FEFAE0;

   --theme-text-primary: #1A2A2A;
   --theme-text-secondary: #264653;
   --theme-text-muted: #4A6A6A;
   --theme-text-inverse: #FFFFFF;
   --theme-text-link: #2A9D8F;

   --theme-border-strong: #264653;
   --theme-border-normal: #2A9D8F;
   --theme-border-light: #E8D8A8;
   --theme-border-focus: #2A9D8F;

   --theme-accent-primary: #2A9D8F;
   --theme-accent-secondary: #E63946;
   --theme-accent-hover: #3DB5A7;

   --theme-shadow-color: rgba(38, 70, 83, 0.4);
   --theme-shadow-btn: 4px 4px 0px #264653;
   --theme-shadow-btn-hover: 4px 4px 0px #264653;
   --theme-shadow-card-hover: 4px 4px 0 #264653;

   --color-cobalt: #2A9D8F;
   --color-cobalt-deep: #264653;
   --color-cobalt-light: #5BC8BA;
   --color-cobalt-pale: #E8F4F0;
   --color-cobalt-wash: #FEFAE0;

   --color-tag-bg: #264653;
   --color-tag-text: #FEFAE0;

   --mode-nano: #F8F0D0;
   --mode-nano-text: #264653;
   --mode-glyph: #E8D8A8;
   --mode-glyph-text: #264653;
   --mode-icon: #FFD700;
   --mode-icon-text: #000000;
   --mode-icon-bw: #E8D8A8;
   --mode-icon-bw-text: #264653;
   --mode-icon-plus: #2A9D8F;
   --mode-icon-plus-text: #FFFFFF;
   --mode-real: #E63946;
   --mode-real-text: #FFFFFF;
   --mode-morph: #2A9D8F;
   --mode-morph-text: #FFFFFF;
   --mode-family: #E63946;
   --mode-family-text: #FFFFFF;

   --theme-icon-color: #264653;
   --theme-dots-color: #2A9D8F;
   --theme-dots-bg: #E8D8A8;
   --theme-btn-bg: #FFFEF8;
   --theme-btn-bg-hover: #E8D8A8;
   --theme-active-bg: #264653;
   --theme-active-text: #FFFFFF;
   --theme-selected-ink: #E63946;
}


/* ==========================================================================
   THEME: BASQUIAT (A9)
   Raw - Street art yellow/red/blue on cream
   ========================================================================== */
[data-theme="basquiat"] {
   --theme-header-bg: #F5F0E8;
   /* Basquiat raw */
   --theme-header-dots-opacity: 0.15;

   --theme-bg-app: #F5F5DC;
   --theme-bg-panel: #E8E8D0;
   --theme-bg-surface: #FFFFF0;
   --theme-bg-input: #FFFFFF;
   --theme-bg-hover: #E0E0C8;
   --theme-bg-active: #000000;
   --theme-bg-highlight: #D32F2F;
   --theme-bg-preview: #F5F5DC;

   --theme-text-primary: #000000;
   --theme-text-secondary: #1A1A1A;
   --theme-text-muted: #4A4A4A;
   --theme-text-inverse: #FFFFFF;
   --theme-text-link: #1976D2;

   --theme-border-strong: #000000;
   --theme-border-normal: #1A1A1A;
   --theme-border-light: #CCCCBB;
   --theme-border-focus: #D32F2F;

   --theme-accent-primary: #FFD700;
   --theme-accent-secondary: #D32F2F;
   --theme-accent-hover: #E6C200;

   --theme-shadow-color: rgba(0, 0, 0, 0.7);
   --theme-shadow-btn: 4px 4px 0px #000000;
   --theme-shadow-btn-hover: 4px 4px 0px #000000;
   --theme-shadow-card-hover: 4px 4px 0 #000000;

   --color-cobalt: #1976D2;
   --color-cobalt-deep: #000000;
   --color-cobalt-light: #64B5F6;
   --color-cobalt-pale: #E8E8D0;
   --color-cobalt-wash: #F5F5DC;

   --color-tag-bg: #000000;
   --color-tag-text: #FFD700;

   --mode-nano: #FFFFFF;
   --mode-nano-text: #000000;
   --mode-glyph: #E8E8D0;
   --mode-glyph-text: #000000;
   --mode-icon: #FFD700;
   --mode-icon-text: #000000;
   --mode-icon-bw: #E8E8D0;
   --mode-icon-bw-text: #000000;
   --mode-icon-plus: #D32F2F;
   --mode-icon-plus-text: #FFFFFF;
   --mode-real: #000000;
   --mode-real-text: #FFD700;
   --mode-morph: #D32F2F;
   --mode-morph-text: #FFFFFF;
   --mode-family: #1976D2;
   --mode-family-text: #FFFFFF;

   --theme-icon-color: #000000;
   --theme-dots-color: #AAAAAA;
   --theme-dots-bg: #E0E0C8;
   --theme-btn-bg: #FFFFF0;
   --theme-btn-bg-hover: #E0E0C8;
   --theme-active-bg: #000000;
   --theme-active-text: #FFD700;
   --theme-selected-ink: #D32F2F;
}


/* ==========================================================================
   THEME: WINDOWS 3.1 (OS2)
   Classic Windows silver/navy
   ========================================================================== */
[data-theme="windows31"] {
   --theme-header-bg: #E8EEF5;
   /* Windows 3.1 blue */
   --theme-header-dots-opacity: 0.18;

   --theme-bg-app: #FFFFFF;
   --theme-bg-panel: #C0C0C0;
   --theme-bg-surface: #DFDFDF;
   --theme-bg-input: #FFFFFF;
   --theme-bg-hover: #A0A0A0;
   --theme-bg-active: #000080;
   --theme-bg-highlight: #FFFFFF;
   --theme-bg-preview: #C0C0C0;

   --theme-text-primary: #000000;
   --theme-text-secondary: #1A1A1A;
   --theme-text-muted: #4A4A4A;
   --theme-text-inverse: #FFFFFF;
   --theme-text-link: #000080;

   --theme-border-strong: #000000;
   --theme-border-normal: #808080;
   --theme-border-light: #FFFFFF;
   --theme-border-focus: #00CED1;

   --theme-accent-primary: #00CED1;
   --theme-accent-secondary: #000080;
   --theme-accent-hover: #40E0D0;

   --theme-shadow-color: rgba(0, 0, 0, 0.6);
   --theme-shadow-btn: 2px 2px 0px #808080;
   --theme-shadow-btn-hover: 2px 2px 0px #808080;
   --theme-shadow-card-hover: 2px 2px 0 #808080;

   --theme-inset-light: #FFFFFF;
   --theme-inset-dark: #808080;

   --color-cobalt: #000080;
   --color-cobalt-deep: #000040;
   --color-cobalt-light: #4040C0;
   --color-cobalt-pale: #C0C0E0;
   --color-cobalt-wash: #C0C0C0;

   --color-tag-bg: #000080;
   --color-tag-text: #FFFFFF;

   --mode-nano: #FFFFFF;
   --mode-nano-text: #000000;
   --mode-glyph: #C0C0C0;
   --mode-glyph-text: #000000;
   --mode-icon: #FFD700;
   --mode-icon-text: #000000;
   --mode-icon-bw: #C0C0C0;
   --mode-icon-bw-text: #000000;
   --mode-icon-plus: #000080;
   --mode-icon-plus-text: #FFFFFF;
   --mode-real: #000080;
   --mode-real-text: #FFFFFF;
   --mode-morph: #000080;
   --mode-morph-text: #FFFFFF;
   --mode-family: #000080;
   --mode-family-text: #FFFFFF;

   --theme-icon-color: #000000;
   --theme-dots-color: #808080;
   --theme-dots-bg: #A0A0A0;
   --theme-btn-bg: #C0C0C0;
   --theme-btn-bg-hover: #A0A0A0;
   --theme-active-bg: #000080;
   --theme-active-text: #FFFFFF;
   --theme-selected-ink: #FFFFFF;
}


/* ==========================================================================
   THEME: WINDOWS 95 (OS3)
   Teal era - Windows 95/98 teal/silver
   ========================================================================== */
[data-theme="windows95"] {
   --theme-header-bg: #E8F0F0;
   /* Windows 95 teal */
   --theme-header-dots-opacity: 0.18;

   --theme-bg-app: #FFFFFF;
   --theme-bg-panel: #C0C0C0;
   --theme-bg-surface: #DFDFDF;
   --theme-bg-input: #FFFFFF;
   --theme-bg-hover: #A0A0A0;
   --theme-bg-active: #008080;
   --theme-bg-highlight: #FFFFFF;
   --theme-bg-preview: #C0C0C0;

   --theme-text-primary: #000000;
   --theme-text-secondary: #1A1A1A;
   --theme-text-muted: #4A4A4A;
   --theme-text-inverse: #FFFFFF;
   --theme-text-link: #008080;

   --theme-border-strong: #000000;
   --theme-border-normal: #808080;
   --theme-border-light: #FFFFFF;
   --theme-border-focus: #00A86B;

   --theme-accent-primary: #00A86B;
   --theme-accent-secondary: #008080;
   --theme-accent-hover: #2EBF81;

   --theme-shadow-color: rgba(0, 0, 0, 0.6);
   --theme-shadow-btn: 2px 2px 0px #808080;
   --theme-shadow-btn-hover: 2px 2px 0px #808080;
   --theme-shadow-card-hover: 2px 2px 0 #808080;

   --theme-inset-light: #FFFFFF;
   --theme-inset-dark: #808080;

   --color-cobalt: #008080;
   --color-cobalt-deep: #000080;
   --color-cobalt-light: #40C0C0;
   --color-cobalt-pale: #C0E0E0;
   --color-cobalt-wash: #C0C0C0;

   --color-tag-bg: #008080;
   --color-tag-text: #FFFFFF;

   --mode-nano: #DFDFDF;
   --mode-nano-text: #000000;
   --mode-glyph: #C0C0C0;
   --mode-glyph-text: #000000;
   --mode-icon: #FFD700;
   --mode-icon-text: #000000;
   --mode-icon-bw: #C0C0C0;
   --mode-icon-bw-text: #000000;
   --mode-icon-plus: #008080;
   --mode-icon-plus-text: #FFFFFF;
   --mode-real: #000080;
   --mode-real-text: #FFFFFF;
   --mode-morph: #008080;
   --mode-morph-text: #FFFFFF;
   --mode-family: #008080;
   --mode-family-text: #FFFFFF;

   --theme-icon-color: #000000;
   --theme-dots-color: #808080;
   --theme-dots-bg: #A0A0A0;
   --theme-btn-bg: #C0C0C0;
   --theme-btn-bg-hover: #A0A0A0;
   --theme-active-bg: #008080;
   --theme-active-text: #FFFFFF;
   --theme-selected-ink: #FFFFFF;
}


/* ==========================================================================
   THEME: GEM (OS9)
   GEM Desktop - Atari ST green/gray
   ========================================================================== */
[data-theme="gem"] {
   --theme-header-bg: #E8F5E8;
   /* GEM green */
   --theme-header-dots-opacity: 0.12;

   --theme-bg-app: #FFFFFF;
   --theme-bg-panel: #EEEEEE;
   --theme-bg-surface: #FFFFFF;
   --theme-bg-input: #FFFFFF;
   --theme-bg-hover: #DDDDDD;
   --theme-bg-active: #00AA00;
   --theme-bg-highlight: #AAAAAA;
   --theme-bg-preview: #FFFFFF;

   --theme-text-primary: #000000;
   --theme-text-secondary: #1A1A1A;
   --theme-text-muted: #4A4A4A;
   --theme-text-inverse: #FFFFFF;
   --theme-text-link: #00AA00;

   --theme-border-strong: #000000;
   --theme-border-normal: #AAAAAA;
   --theme-border-light: #CCCCCC;
   --theme-border-focus: #3CB371;

   --theme-accent-primary: #3CB371;
   --theme-accent-secondary: #00AA00;
   --theme-accent-hover: #5CC98C;

   --theme-shadow-color: rgba(0, 0, 0, 0.5);
   --theme-shadow-btn: 2px 2px 0px #000000;
   --theme-shadow-btn-hover: 2px 2px 0px #000000;
   --theme-shadow-card-hover: 2px 2px 0 #000000;

   --color-cobalt: #00AA00;
   --color-cobalt-deep: #006600;
   --color-cobalt-light: #44CC44;
   --color-cobalt-pale: #CCFFCC;
   --color-cobalt-wash: #FFFFFF;

   --color-tag-bg: #00AA00;
   --color-tag-text: #FFFFFF;

   --mode-nano: #FFFFFF;
   --mode-nano-text: #000000;
   --mode-glyph: #AAAAAA;
   --mode-glyph-text: #000000;
   --mode-icon: #FFD700;
   --mode-icon-text: #000000;
   --mode-icon-bw: #AAAAAA;
   --mode-icon-bw-text: #000000;
   --mode-icon-plus: #00AA00;
   --mode-icon-plus-text: #FFFFFF;
   --mode-real: #000000;
   --mode-real-text: #FFFFFF;
   --mode-morph: #00AA00;
   --mode-morph-text: #FFFFFF;
   --mode-family: #00AA00;
   --mode-family-text: #FFFFFF;

   --theme-icon-color: #000000;
   --theme-dots-color: #888888;
   --theme-dots-bg: #DDDDDD;
   --theme-btn-bg: #EEEEEE;
   --theme-btn-bg-hover: #DDDDDD;
   --theme-active-bg: #00AA00;
   --theme-active-text: #FFFFFF;
   --theme-selected-ink: #FFFFFF;
}


/* ==========================================================================
   THEME: RISC OS (OS10)
   Acorn RISC OS - Cream/red British computing
   ========================================================================== */
[data-theme="riscos"] {
   --theme-header-bg: #EAEAEA;
   /* RISC OS gray */
   --theme-header-dots-opacity: 0.15;

   --theme-bg-app: #FFFFFF;
   --theme-bg-panel: #CCCCBB;
   --theme-bg-surface: #EEEEDC;
   --theme-bg-input: #FFFFFF;
   --theme-bg-hover: #BBBBAA;
   --theme-bg-active: #BB0000;
   --theme-bg-highlight: #FFFF00;
   --theme-bg-preview: #DDDDCC;

   --theme-text-primary: #000000;
   --theme-text-secondary: #333333;
   --theme-text-muted: #555555;
   --theme-text-inverse: #FFFFFF;
   --theme-text-link: #BB0000;

   --theme-border-strong: #555555;
   --theme-border-normal: #888888;
   --theme-border-light: #CCCCBB;
   --theme-border-focus: #FF6B6B;

   --theme-accent-primary: #FF6B6B;
   --theme-accent-secondary: #BB0000;
   --theme-accent-hover: #FF8A8A;

   --theme-shadow-color: rgba(85, 85, 85, 0.4);
   --theme-shadow-btn: 2px 2px 0px #555555;
   --theme-shadow-btn-hover: 2px 2px 0px #555555;
   --theme-shadow-card-hover: 2px 2px 0 #555555;

   --color-cobalt: #BB0000;
   --color-cobalt-deep: #555555;
   --color-cobalt-light: #DD4444;
   --color-cobalt-pale: #FFCCCC;
   --color-cobalt-wash: #DDDDCC;

   --color-tag-bg: #555555;
   --color-tag-text: #DDDDCC;

   --mode-nano: #EEEEDC;
   --mode-nano-text: #333333;
   --mode-glyph: #CCCCBB;
   --mode-glyph-text: #333333;
   --mode-icon: #FFD700;
   --mode-icon-text: #000000;
   --mode-icon-bw: #CCCCBB;
   --mode-icon-bw-text: #333333;
   --mode-icon-plus: #BB0000;
   --mode-icon-plus-text: #FFFFFF;
   --mode-real: #555555;
   --mode-real-text: #FFFFFF;
   --mode-morph: #BB0000;
   --mode-morph-text: #FFFFFF;
   --mode-family: #BB0000;
   --mode-family-text: #FFFFFF;

   --theme-icon-color: #555555;
   --theme-dots-color: #888888;
   --theme-dots-bg: #BBBBAA;
   --theme-btn-bg: #EEEEDC;
   --theme-btn-bg-hover: #BBBBAA;
   --theme-active-bg: #BB0000;
   --theme-active-text: #FFFFFF;
   --theme-selected-ink: #FFFFFF;
}


/* ==========================================================================
   THEME: PISTACHIO (R3)
   Sweet green/olive tones
   ========================================================================== */
[data-theme="pistachio"] {
   --theme-header-bg: #F0F5E8;
   /* Pistachio green */
   --theme-header-dots-opacity: 0.12;

   --theme-bg-app: #F4F9F0;
   --theme-bg-panel: #E8F5E0;
   --theme-bg-surface: #F8FCF5;
   --theme-bg-input: #FFFFFF;
   --theme-bg-hover: #C8E6B0;
   --theme-bg-active: #3D5229;
   --theme-bg-highlight: #93C572;
   --theme-bg-preview: #F4F9F0;

   --theme-text-primary: #1A2A10;
   --theme-text-secondary: #3D5229;
   --theme-text-muted: #5A7A40;
   --theme-text-inverse: #FFFFFF;
   --theme-text-link: #6B8E23;

   --theme-border-strong: #3D5229;
   --theme-border-normal: #6B8E23;
   --theme-border-light: #C8E6B0;
   --theme-border-focus: #7CB342;

   --theme-accent-primary: #7CB342;
   /* Bolder pistachio green */
   --theme-accent-secondary: #6B8E23;
   --theme-accent-hover: #6CA030;

   --theme-shadow-color: rgba(61, 82, 41, 0.4);
   --theme-shadow-btn: 4px 4px 0px #3D5229;
   --theme-shadow-btn-hover: 4px 4px 0px #3D5229;
   --theme-shadow-card-hover: 4px 4px 0 #3D5229;

   --color-cobalt: #7CB342;
   --color-cobalt-deep: #3D5229;
   --color-cobalt-light: #93C572;
   --color-cobalt-pale: #E8F5E0;
   --color-cobalt-wash: #F4F9F0;

   --color-tag-bg: #3D5229;
   --color-tag-text: #E8F5E0;

   --mode-nano: #E8F5E0;
   --mode-nano-text: #3D5229;
   --mode-glyph: #C8E6B0;
   --mode-glyph-text: #3D5229;
   --mode-icon: #7CB342;
   --mode-icon-text: #FFFFFF;
   --mode-icon-bw: #C8E6B0;
   --mode-icon-bw-text: #3D5229;
   --mode-icon-plus: #93C572;
   --mode-icon-plus-text: #3D5229;
   --mode-real: #3D5229;
   --mode-real-text: #FFFFFF;
   --mode-morph: #6B8E23;
   --mode-morph-text: #FFFFFF;
   --mode-family: #6B8E23;
   --mode-family-text: #FFFFFF;

   --theme-icon-color: #3D5229;
   --theme-dots-color: #93C572;
   --theme-dots-bg: #C8E6B0;
   --theme-btn-bg: #F8FCF5;
   --theme-btn-bg-hover: #C8E6B0;
   --theme-active-bg: #3D5229;
   --theme-active-text: #FFFFFF;
   --theme-selected-ink: #93C572;
}


/* ==========================================================================
   THEME: TERRACOTTA (R4)
   Earth - Mediterranean warm tones
   ========================================================================== */
[data-theme="terracotta"] {
   --theme-header-bg: #FFF5EE;
   /* Terracotta warm */
   --theme-header-dots-opacity: 0.15;

   --theme-bg-app: #F4F1DE;
   --theme-bg-panel: #F8F5E8;
   --theme-bg-surface: #FFFCF5;
   --theme-bg-input: #FFFFFF;
   --theme-bg-hover: #E8E4D0;
   --theme-bg-active: #3D405B;
   --theme-bg-highlight: #E07A5F;
   --theme-bg-preview: #F4F1DE;

   --theme-text-primary: #2A2A3A;
   --theme-text-secondary: #3D405B;
   --theme-text-muted: #6B6B8B;
   --theme-text-inverse: #FFFFFF;
   --theme-text-link: #E07A5F;

   --theme-border-strong: #3D405B;
   --theme-border-normal: #E07A5F;
   --theme-border-light: #E8E4D0;
   --theme-border-focus: #E85D40;

   --theme-accent-primary: #E85D40;
   /* Bolder terracotta */
   --theme-accent-secondary: #E07A5F;
   --theme-accent-hover: #D54D30;

   --theme-shadow-color: rgba(61, 64, 91, 0.4);
   --theme-shadow-btn: 4px 4px 0px #3D405B;
   --theme-shadow-btn-hover: 4px 4px 0px #3D405B;
   --theme-shadow-card-hover: 4px 4px 0 #3D405B;

   --color-cobalt: #E85D40;
   --color-cobalt-deep: #3D405B;
   --color-cobalt-light: #F0A090;
   --color-cobalt-pale: #F8F5E8;
   --color-cobalt-wash: #F4F1DE;

   --color-tag-bg: #3D405B;
   --color-tag-text: #F4F1DE;

   --mode-nano: #F8F5E8;
   --mode-nano-text: #3D405B;
   --mode-glyph: #E8E4D0;
   --mode-glyph-text: #3D405B;
   --mode-icon: #E85D40;
   --mode-icon-text: #FFFFFF;
   --mode-icon-bw: #E8E4D0;
   --mode-icon-bw-text: #3D405B;
   --mode-icon-plus: #E07A5F;
   --mode-icon-plus-text: #FFFFFF;
   --mode-real: #3D405B;
   --mode-real-text: #FFFFFF;
   --mode-morph: #E07A5F;
   --mode-morph-text: #FFFFFF;
   --mode-family: #81B29A;
   --mode-family-text: #FFFFFF;

   --theme-icon-color: #3D405B;
   --theme-dots-color: #E07A5F;
   --theme-dots-bg: #E8E4D0;
   --theme-btn-bg: #FFFCF5;
   --theme-btn-bg-hover: #E8E4D0;
   --theme-active-bg: #3D405B;
   --theme-active-text: #FFFFFF;
   --theme-selected-ink: #E07A5F;
}


/* ==========================================================================
   THEME: BLUEBELL (R5)
   Garden - Sky blue/navy
   ========================================================================== */
[data-theme="bluebell"] {
   --theme-header-bg: #F0F5FF;
   /* Bluebell sky */
   --theme-header-dots-opacity: 0.12;

   --theme-bg-app: #F0F5FF;
   --theme-bg-panel: #E0EAFF;
   --theme-bg-surface: #F8FAFF;
   --theme-bg-input: #FFFFFF;
   --theme-bg-hover: #C0D4FF;
   --theme-bg-active: #2D3A8C;
   --theme-bg-highlight: #5C7AEA;
   --theme-bg-preview: #F0F5FF;

   --theme-text-primary: #1A2040;
   --theme-text-secondary: #2D3A8C;
   --theme-text-muted: #5A6AAA;
   --theme-text-inverse: #FFFFFF;
   --theme-text-link: #5C7AEA;

   --theme-border-strong: #2D3A8C;
   --theme-border-normal: #5C7AEA;
   --theme-border-light: #C0D4FF;
   --theme-border-focus: #5C7FD4;

   --theme-accent-primary: #5C7FD4;
   /* Bolder bluebell */
   --theme-accent-secondary: #5C7AEA;
   --theme-accent-hover: #4A6BC4;

   --theme-shadow-color: rgba(45, 58, 140, 0.4);
   --theme-shadow-btn: 4px 4px 0px #2D3A8C;
   --theme-shadow-btn-hover: 4px 4px 0px #2D3A8C;
   --theme-shadow-card-hover: 4px 4px 0 #2D3A8C;

   --color-cobalt: #5C7FD4;
   --color-cobalt-deep: #2D3A8C;
   --color-cobalt-light: #A0C4FF;
   --color-cobalt-pale: #E0EAFF;
   --color-cobalt-wash: #F0F5FF;

   --color-tag-bg: #2D3A8C;
   --color-tag-text: #E0EAFF;

   --mode-nano: #E0EAFF;
   --mode-nano-text: #2D3A8C;
   --mode-glyph: #C0D4FF;
   --mode-glyph-text: #2D3A8C;
   --mode-icon: #5C7FD4;
   --mode-icon-text: #FFFFFF;
   --mode-icon-bw: #C0D4FF;
   --mode-icon-bw-text: #2D3A8C;
   --mode-icon-plus: #5C7AEA;
   --mode-icon-plus-text: #FFFFFF;
   --mode-real: #2D3A8C;
   --mode-real-text: #FFFFFF;
   --mode-morph: #5C7AEA;
   --mode-morph-text: #FFFFFF;
   --mode-family: #5C7AEA;
   --mode-family-text: #FFFFFF;

   --theme-icon-color: #2D3A8C;
   --theme-dots-color: #5C7AEA;
   --theme-dots-bg: #C0D4FF;
   --theme-btn-bg: #F8FAFF;
   --theme-btn-bg-hover: #C0D4FF;
   --theme-active-bg: #2D3A8C;
   --theme-active-text: #FFFFFF;
   --theme-selected-ink: #A0C4FF;
}


/* ==========================================================================
   THEME: PEACH FUZZ (R6)
   2024 Color of the Year - Warm peach/tan
   ========================================================================== */
[data-theme="peach-fuzz"] {
   --theme-header-bg: #FDF5EE;
   /* Peach fuzz warm */
   --theme-header-dots-opacity: 0.12;

   --theme-bg-app: #FFF8F0;
   --theme-bg-panel: #FFE8D6;
   --theme-bg-surface: #FFFCF8;
   --theme-bg-input: #FFFFFF;
   --theme-bg-hover: #FFD4B8;
   --theme-bg-active: #5D4E37;
   --theme-bg-highlight: #FFBE98;
   --theme-bg-preview: #FFF8F0;

   --theme-text-primary: #3A2A1A;
   --theme-text-secondary: #5D4E37;
   --theme-text-muted: #8A7A60;
   --theme-text-inverse: #FFFFFF;
   --theme-text-link: #D4A574;

   --theme-border-strong: #5D4E37;
   --theme-border-normal: #D4A574;
   --theme-border-light: #FFD4B8;
   --theme-border-focus: #FF9A76;

   --theme-accent-primary: #FF9A76;
   /* Bolder peach */
   --theme-accent-secondary: #D4A574;
   --theme-accent-hover: #EE8A66;

   --theme-shadow-color: rgba(93, 78, 55, 0.4);
   --theme-shadow-btn: 4px 4px 0px #5D4E37;
   --theme-shadow-btn-hover: 4px 4px 0px #5D4E37;
   --theme-shadow-card-hover: 4px 4px 0 #5D4E37;

   --color-cobalt: #FF9A76;
   --color-cobalt-deep: #5D4E37;
   --color-cobalt-light: #FFBE98;
   --color-cobalt-pale: #FFE8D6;
   --color-cobalt-wash: #FFF8F0;

   --color-tag-bg: #5D4E37;
   --color-tag-text: #FFE8D6;

   --mode-nano: #FFE8D6;
   --mode-nano-text: #5D4E37;
   --mode-glyph: #FFD4B8;
   --mode-glyph-text: #5D4E37;
   --mode-icon: #FF9A76;
   --mode-icon-text: #000000;
   --mode-icon-bw: #FFD4B8;
   --mode-icon-bw-text: #5D4E37;
   --mode-icon-plus: #D4A574;
   --mode-icon-plus-text: #FFFFFF;
   --mode-real: #5D4E37;
   --mode-real-text: #FFFFFF;
   --mode-morph: #D4A574;
   --mode-morph-text: #FFFFFF;
   --mode-family: #D4A574;
   --mode-family-text: #FFFFFF;

   --theme-icon-color: #5D4E37;
   --theme-dots-color: #D4A574;
   --theme-dots-bg: #FFD4B8;
   --theme-btn-bg: #FFFCF8;
   --theme-btn-bg-hover: #FFD4B8;
   --theme-active-bg: #5D4E37;
   --theme-active-text: #FFFFFF;
   --theme-selected-ink: #FFBE98;
}


/* ==========================================================================
   THEME: STORM CLOUD (R10)
   Moody - Steel/slate/dark teal
   ========================================================================== */
[data-theme="storm-cloud"] {
   --theme-header-bg: #EEF2F5;
   /* Storm cloud steel */
   --theme-header-dots-opacity: 0.15;

   --theme-bg-app: #F0F4F8;
   --theme-bg-panel: #E0E8F0;
   --theme-bg-surface: #F8FAFC;
   --theme-bg-input: #FFFFFF;
   --theme-bg-hover: #C8D4E0;
   --theme-bg-active: #2F4F4F;
   --theme-bg-highlight: #708090;
   --theme-bg-preview: #F0F4F8;

   --theme-text-primary: #1A2A2A;
   --theme-text-secondary: #2F4F4F;
   --theme-text-muted: #5A7A7A;
   --theme-text-inverse: #FFFFFF;
   --theme-text-link: #708090;

   --theme-border-strong: #2F4F4F;
   --theme-border-normal: #708090;
   --theme-border-light: #C8D4E0;
   --theme-border-focus: #708090;

   --theme-accent-primary: #708090;
   --theme-accent-secondary: #708090;
   --theme-accent-hover: #8A9AAA;

   --theme-shadow-color: rgba(47, 79, 79, 0.4);
   --theme-shadow-btn: 4px 4px 0px #2F4F4F;
   --theme-shadow-btn-hover: 4px 4px 0px #2F4F4F;
   --theme-shadow-card-hover: 4px 4px 0 #2F4F4F;

   --color-cobalt: #708090;
   --color-cobalt-deep: #2F4F4F;
   --color-cobalt-light: #B0C4DE;
   --color-cobalt-pale: #E0E8F0;
   --color-cobalt-wash: #F0F4F8;

   --color-tag-bg: #2F4F4F;
   --color-tag-text: #E0E8F0;

   --mode-nano: #E0E8F0;
   --mode-nano-text: #2F4F4F;
   --mode-glyph: #C8D4E0;
   --mode-glyph-text: #2F4F4F;
   --mode-icon: #FFD700;
   --mode-icon-text: #000000;
   --mode-icon-bw: #C8D4E0;
   --mode-icon-bw-text: #2F4F4F;
   --mode-icon-plus: #708090;
   --mode-icon-plus-text: #FFFFFF;
   --mode-real: #2F4F4F;
   --mode-real-text: #FFFFFF;
   --mode-morph: #708090;
   --mode-morph-text: #FFFFFF;
   --mode-family: #708090;
   --mode-family-text: #FFFFFF;

   --theme-icon-color: #2F4F4F;
   --theme-dots-color: #708090;
   --theme-dots-bg: #C8D4E0;
   --theme-btn-bg: #F8FAFC;
   --theme-btn-bg-hover: #C8D4E0;
   --theme-active-bg: #2F4F4F;
   --theme-active-text: #FFFFFF;
   --theme-selected-ink: #B0C4DE;
}


/* ==========================================================================
   SCROLLBAR STYLING
   Now uses theme variables
   ========================================================================== */
::-webkit-scrollbar {
   width: var(--scrollbar-width);
   height: var(--scrollbar-width);
}

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

::-webkit-scrollbar-thumb {
   background: var(--theme-scrollbar-thumb);
   border: 1px solid var(--theme-border-light);
}

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

/* Firefox */
* {
   scrollbar-width: thin;
   scrollbar-color: var(--theme-scrollbar-thumb) var(--theme-scrollbar-track);
}


/* ==========================================================================
   SELECTION STYLING
   ========================================================================== */
::selection {
   background: var(--theme-selection-bg);
   color: var(--theme-selection-text);
}

::-moz-selection {
   background: var(--theme-selection-bg);
   color: var(--theme-selection-text);
}