/**
 * Mutiro Terminal Themes with Web Awesome Integration
 * 
 * Strategy:
 * 1. Define Web Awesome variables ONCE in :root (referencing Mutiro colors)
 * 2. Each theme only overrides the Mutiro colors
 * 3. Web Awesome automatically uses the new colors via CSS cascade
 */

/* ============================================================================
   BASE SETUP - Define Web Awesome variables that reference Mutiro colors
   This only needs to be done ONCE
   ============================================================================ */

:root {
    /* Theme mode indicator */
    --mutiro-theme-mode: dark;

    /* Default Mutiro Colors (Ocean theme) */
    --mutiro-color-primary: #00ccdd;
    --mutiro-color-primary-light: #00ddee;
    --mutiro-color-primary-dark: #00a0bb;
    --mutiro-color-secondary: #8877ff;
    --mutiro-color-accent: #00eeaa;
    --mutiro-color-background: #000011;
    --mutiro-color-surface: rgba(0, 17, 34, 0.3);
    --mutiro-color-surface-elevated: rgba(0, 17, 51, 0.4);
    --mutiro-color-text-primary: #00ccdd;
    --mutiro-color-text-secondary: #00a0bb;
    --mutiro-color-text-muted: #005e77;
    --mutiro-color-text-on-primary: #ffffff;  /* White text for use on primary colored backgrounds */
    --mutiro-color-border: #005e77;
    --mutiro-color-success: #00eeaa;  /* Ocean teal */
    --mutiro-color-warning: #ffaa00;  /* Ocean amber */
    --mutiro-color-error: #ff8844;  /* Ocean coral */
    
    /* Typography - Single source of truth for fonts */
    --mutiro-font-body: ui-sans-serif, system-ui, sans-serif;
    --mutiro-font-heading: var(--mutiro-font-body);
    --mutiro-font-code: ui-monospace, monospace;
    --mutiro-font-longform: var(--mutiro-font-body);
    --mutiro-font-mono: 'JetBrains Mono', ui-monospace, monospace;
    --mutiro-font-display: 'Saira Condensed', var(--mutiro-font-mono);
    
    /* Mutiro Font Sizes */
    --mutiro-font-size-2xs: 11px;
    --mutiro-font-size-xs: 12px;
    --mutiro-font-size-s: 14px;
    --mutiro-font-size-m: 16px;  /* Base size */
    --mutiro-font-size-l: 20px;
    --mutiro-font-size-xl: 25px;
    --mutiro-font-size-2xl: 32px;
    --mutiro-font-size-3xl: 41px;
    --mutiro-font-size-4xl: 52px;
    --mutiro-font-size-hero: 64px;  /* For hero titles */
    
    /* Mutiro Font Weights */
    --mutiro-font-weight-light: 300;
    --mutiro-font-weight-normal: 400;
    --mutiro-font-weight-medium: 500;
    --mutiro-font-weight-semibold: 600;
    --mutiro-font-weight-bold: 700;
    
    /* Mutiro Line Heights */
    --mutiro-line-height-tight: 1.2;
    --mutiro-line-height-normal: 1.6;
    --mutiro-line-height-relaxed: 1.8;
    --mutiro-line-height-loose: 2;
    
    /* Mutiro Link Styles */
    --mutiro-link-color: var(--mutiro-color-primary-light);
    --mutiro-link-decoration: underline dotted;
    --mutiro-link-decoration-hover: underline solid;
    
    /* Mutiro Border Styles */
    --mutiro-border-style: solid;
    
    /* Mutiro Border Widths */
    --mutiro-border-width-s: 1px;  /* 0.0625rem */
    --mutiro-border-width-m: 2px;  /* 0.125rem */
    --mutiro-border-width-l: 3px;  /* 0.1875rem */
    --mutiro-border-width-xl: 4px; /* Extra for emphasis */
    
    /* Mutiro Border Radius */
    --mutiro-border-radius-none: 0;
    --mutiro-border-radius-s: 3px;   /* 0.1875rem - subtle rounding */
    --mutiro-border-radius-m: 6px;   /* 0.375rem - medium rounding */
    --mutiro-border-radius-l: 12px;  /* 0.75rem - large rounding */
    --mutiro-border-radius-xl: 24px; /* Extra large for cards */
    --mutiro-border-radius-pill: 9999px;
    --mutiro-border-radius-circle: 50%;
    
    /* Mutiro Spacing System */
    --mutiro-space-3xs: 2px;   /* 0.125rem - micro spacing */
    --mutiro-space-2xs: 4px;   /* 0.25rem - tiny spacing */
    --mutiro-space-xs: 8px;    /* 0.5rem - extra small */
    --mutiro-space-s: 12px;    /* 0.75rem - small */
    --mutiro-space-m: 16px;    /* 1rem - medium (base) */
    --mutiro-space-l: 24px;    /* 1.5rem - large */
    --mutiro-space-xl: 32px;   /* 2rem - extra large */
    --mutiro-space-2xl: 40px;  /* 2.5rem - 2x large */
    --mutiro-space-3xl: 48px;  /* 3rem - 3x large */
    --mutiro-space-4xl: 64px;  /* 4rem - 4x large */
    --mutiro-space-5xl: 80px;  /* 5rem - 5x large */
    --mutiro-space-6xl: 96px;  /* 6rem - 6x large */
    
    /* Terminal effects */
    --mutiro-glow-color: var(--mutiro-color-primary-light);
    --mutiro-glow-intensity: 0 0 10px;
    --mutiro-transition-speed: 0.6s;
    
    /* ========================================
       WEB AWESOME VARIABLES
       These reference Mutiro colors, so when themes change Mutiro colors,
       Web Awesome components automatically update!
       ======================================== */
}

/* Apply Web Awesome variables to all elements including themed contexts */
:root,
[data-theme] {
    /* WebAwesome Typography - Using our Mutiro font variables */
    --wa-font-family-body: var(--mutiro-font-body);
    --wa-font-family-heading: var(--mutiro-font-heading);
    --wa-font-family-code: var(--mutiro-font-code);
    --wa-font-family-longform: var(--mutiro-font-longform);
    
    /* WebAwesome Font Sizes - Bound to Mutiro sizes */
    --wa-font-size-scale: 1;
    --wa-font-size-2xs: var(--mutiro-font-size-2xs);
    --wa-font-size-xs: var(--mutiro-font-size-xs);
    --wa-font-size-s: var(--mutiro-font-size-s);
    --wa-font-size-m: var(--mutiro-font-size-m);
    --wa-font-size-l: var(--mutiro-font-size-l);
    --wa-font-size-xl: var(--mutiro-font-size-xl);
    --wa-font-size-2xl: var(--mutiro-font-size-2xl);
    --wa-font-size-3xl: var(--mutiro-font-size-3xl);
    --wa-font-size-4xl: var(--mutiro-font-size-4xl);
    
    /* WebAwesome Relative font sizes */
    --wa-font-size-smaller: round(calc(1em / 1.125), 1px);
    --wa-font-size-larger: round(calc(1em * 1.125 * 1.125), 1px);
    
    /* WebAwesome Font Weights - Bound to Mutiro weights */
    --wa-font-weight-light: var(--mutiro-font-weight-light);
    --wa-font-weight-normal: var(--mutiro-font-weight-normal);
    --wa-font-weight-semibold: var(--mutiro-font-weight-medium);
    --wa-font-weight-bold: var(--mutiro-font-weight-semibold);
    
    /* WebAwesome Role-based weights */
    --wa-font-weight-body: var(--mutiro-font-weight-normal);
    --wa-font-weight-heading: var(--mutiro-font-weight-semibold);
    --wa-font-weight-action: var(--mutiro-font-weight-medium);
    
    /* WebAwesome Line Heights - Bound to Mutiro */
    --wa-line-height-condensed: var(--mutiro-line-height-tight);
    --wa-line-height-normal: var(--mutiro-line-height-normal);
    --wa-line-height-expanded: var(--mutiro-line-height-loose);
    
    /* WebAwesome Link Styles - Bound to Mutiro */
    --wa-color-text-link: var(--mutiro-link-color);
    --wa-link-decoration-default: var(--mutiro-link-decoration);
    --wa-link-decoration-hover: var(--mutiro-link-decoration-hover);
    
    /* Brand/Primary colors - Web Awesome uses these for primary buttons, etc */
    --wa-color-brand-50: var(--mutiro-color-primary);
    --wa-color-brand-60: var(--mutiro-color-primary-light);
    --wa-color-brand-40: var(--mutiro-color-primary-dark);
    --wa-color-brand: var(--mutiro-color-primary);
    
    /* Success colors */
    --wa-color-success-50: var(--mutiro-color-success);
    --wa-color-success-60: color-mix(in srgb, var(--mutiro-color-success) 80%, white);
    --wa-color-success-40: color-mix(in srgb, var(--mutiro-color-success) 80%, black);
    --wa-color-success: var(--mutiro-color-success);
    
    /* Warning colors */
    --wa-color-warning-50: var(--mutiro-color-warning);
    --wa-color-warning-60: color-mix(in srgb, var(--mutiro-color-warning) 80%, white);
    --wa-color-warning-40: color-mix(in srgb, var(--mutiro-color-warning) 80%, black);
    --wa-color-warning: var(--mutiro-color-warning);
    
    /* Danger colors */
    --wa-color-danger-50: var(--mutiro-color-error);
    --wa-color-danger-60: color-mix(in srgb, var(--mutiro-color-error) 80%, white);
    --wa-color-danger-40: color-mix(in srgb, var(--mutiro-color-error) 80%, black);
    --wa-color-danger: var(--mutiro-color-error);
    
    /* Surface colors */
    --wa-color-surface-raised: var(--mutiro-color-background);
    --wa-color-surface-default: var(--mutiro-color-surface);
    --wa-color-surface-lowered: var(--mutiro-color-surface-elevated);
    --wa-color-surface-border: var(--mutiro-color-border);
    
    /* Text colors */
    --wa-color-text-normal: var(--mutiro-color-text-primary);
    --wa-color-text-quiet: var(--mutiro-color-text-muted);
    --wa-color-text-loud: var(--mutiro-color-text-primary);
    --wa-color-text: var(--mutiro-color-text-primary);
    --wa-color-text-link: var(--mutiro-color-primary-light);
    
    /* Semantic colors for component states */
    --wa-color-brand-fill-loud: var(--mutiro-color-primary);
    --wa-color-brand-fill-normal: color-mix(in srgb, var(--mutiro-color-primary) 20%, var(--mutiro-color-background));
    --wa-color-brand-fill-quiet: color-mix(in srgb, var(--mutiro-color-primary) 10%, var(--mutiro-color-background));
    --wa-color-brand-border-loud: var(--mutiro-color-primary-light);
    --wa-color-brand-border-normal: var(--mutiro-color-primary);
    --wa-color-brand-border-quiet: var(--mutiro-color-primary-dark);
    --wa-color-brand-on-loud: var(--mutiro-color-background);
    --wa-color-brand-on-normal: var(--mutiro-color-primary-light);
    --wa-color-brand-on-quiet: var(--mutiro-color-primary);
    
    /* Generate full color scales using color-mix */
    --wa-color-brand-95: color-mix(in srgb, var(--mutiro-color-primary) 5%, white);
    --wa-color-brand-90: color-mix(in srgb, var(--mutiro-color-primary) 10%, white);
    --wa-color-brand-80: color-mix(in srgb, var(--mutiro-color-primary) 20%, white);
    --wa-color-brand-70: color-mix(in srgb, var(--mutiro-color-primary) 30%, white);
    --wa-color-brand-30: color-mix(in srgb, var(--mutiro-color-primary) 70%, black);
    --wa-color-brand-20: color-mix(in srgb, var(--mutiro-color-primary) 55%, black);
    --wa-color-brand-10: color-mix(in srgb, var(--mutiro-color-primary) 40%, black);
    --wa-color-brand-05: color-mix(in srgb, var(--mutiro-color-primary) 25%, black);
    
    /* Neutral scale - Web Awesome uses these for text colors */
    --wa-color-neutral-0: var(--mutiro-color-background);
    --wa-color-neutral-50: var(--mutiro-color-surface);
    --wa-color-neutral-100: var(--mutiro-color-surface-elevated);
    --wa-color-neutral-150: color-mix(in srgb, var(--mutiro-color-border) 75%, var(--mutiro-color-surface-elevated));
    --wa-color-neutral-200: var(--mutiro-color-border);
    --wa-color-neutral-300: var(--mutiro-color-text-muted);
    --wa-color-neutral-400: color-mix(in srgb, var(--mutiro-color-text-muted) 75%, var(--mutiro-color-text-secondary));
    --wa-color-neutral-500: var(--mutiro-color-text-secondary);
    --wa-color-neutral-600: color-mix(in srgb, var(--mutiro-color-text-secondary) 75%, var(--mutiro-color-text-primary));
    --wa-color-neutral-700: var(--mutiro-color-text-primary);
    --wa-color-neutral-800: var(--mutiro-color-text-primary);
    --wa-color-neutral-900: var(--mutiro-color-text-primary);
    --wa-color-neutral-950: var(--mutiro-color-text-primary);
    --wa-color-neutral-1000: var(--mutiro-color-text-primary);
    
    /* Panel/dropdown specific colors */
    --wa-panel-background-color: var(--mutiro-color-surface);
    --wa-panel-border-color: var(--mutiro-color-border);
    
    /* Color fills that Web Awesome uses for text on surfaces */
    --wa-color-neutral-fill-loud: var(--mutiro-color-text-primary);
    --wa-color-neutral-on-loud: var(--mutiro-color-background);
    --wa-color-neutral-on-normal: var(--mutiro-color-text-primary);
    
    /* Focus ring with theme-aware color */
    --wa-focus-ring-color: var(--mutiro-color-primary);
    --wa-focus-ring: 0 0 0 2px color-mix(in srgb, var(--mutiro-color-primary) 30%, transparent);
    
    /* Typography and spacing (same for all themes) */
    --wa-font-sans: var(--mutiro-font-body);
    --wa-font-mono: var(--mutiro-font-code);
    
    /* WebAwesome Border Styles - Bound to Mutiro */
    --wa-border-style: var(--mutiro-border-style);
    
    /* WebAwesome Border Widths - Bound to Mutiro */
    --wa-border-width-s: var(--mutiro-border-width-s);
    --wa-border-width-m: var(--mutiro-border-width-m);
    --wa-border-width-l: var(--mutiro-border-width-l);
    --wa-border-width-scale: 1; /* Multiplier for all borders */
    
    /* WebAwesome Border Radius - Bound to Mutiro */
    --wa-border-radius-s: var(--mutiro-border-radius-s);
    --wa-border-radius-m: var(--mutiro-border-radius-m);
    --wa-border-radius-l: var(--mutiro-border-radius-l);
    --wa-border-radius-pill: var(--mutiro-border-radius-pill);
    --wa-border-radius-circle: var(--mutiro-border-radius-circle);
    --wa-border-radius-square: var(--mutiro-border-radius-none);
    --wa-border-radius-scale: 1; /* Multiplier for all radii */
    
    /* Legacy names for compatibility */
    --wa-border-radius-small: var(--mutiro-border-radius-s);
    --wa-border-radius-medium: var(--mutiro-border-radius-m);
    --wa-border-radius-large: var(--mutiro-border-radius-l);
    
    /* WebAwesome Spacing - Bound to Mutiro */
    --wa-space-scale: 1; /* Multiplier for all spacing */
    --wa-space-3xs: calc(var(--wa-space-scale) * var(--mutiro-space-3xs));
    --wa-space-2xs: calc(var(--wa-space-scale) * var(--mutiro-space-2xs));
    --wa-space-xs: calc(var(--wa-space-scale) * var(--mutiro-space-xs));
    --wa-space-s: calc(var(--wa-space-scale) * var(--mutiro-space-s));
    --wa-space-m: calc(var(--wa-space-scale) * var(--mutiro-space-m));
    --wa-space-l: calc(var(--wa-space-scale) * var(--mutiro-space-l));
    --wa-space-xl: calc(var(--wa-space-scale) * var(--mutiro-space-xl));
    --wa-space-2xl: calc(var(--wa-space-scale) * var(--mutiro-space-2xl));
    --wa-space-3xl: calc(var(--wa-space-scale) * var(--mutiro-space-3xl));
    --wa-space-4xl: calc(var(--wa-space-scale) * var(--mutiro-space-4xl));
    
    /* Transitions */
    --wa-transition-fast: 150ms;
    --wa-transition-medium: 250ms;
    --wa-transition-slow: 500ms;
}

/* Web Awesome component parts that need explicit color fixing */
wa-select::part(display-input) {
    color: var(--mutiro-color-text-primary);
}

/* ============================================================================
   TERMINAL THEMES
   Each theme only needs to override the Mutiro colors
   Web Awesome automatically picks up the changes!
   ============================================================================ */

/* Ocean Theme (Default - already defined in :root) */
[data-theme="ocean"] {
    /* Uses default colors from :root */
}

/* Matrix Theme - Green terminal */
[data-theme="matrix"] {
    --mutiro-color-primary: #00ff00;
    --mutiro-color-primary-light: #44ff44;
    --mutiro-color-primary-dark: #00aa00;
    --mutiro-color-secondary: #00cc00;
    --mutiro-color-accent: #00ff00;
    --mutiro-color-background: #000000;
    --mutiro-color-surface: rgba(0, 17, 0, 0.3);
    --mutiro-color-surface-elevated: rgba(0, 34, 0, 0.4);
    --mutiro-color-text-primary: #00ff00;
    --mutiro-color-text-secondary: #00cc00;
    --mutiro-color-text-muted: #008800;
    --mutiro-color-border: #004400;
    --mutiro-color-success: #00ff00;
    --mutiro-color-warning: #88ff00;
    --mutiro-color-error: #ffff00;
    --mutiro-glow-color: #00ff00;
}

/* Cyberpunk Theme - Pink and cyan */
[data-theme="cyberpunk"] {
    --mutiro-color-primary: #ff00ff;
    --mutiro-color-primary-light: #ff44ff;
    --mutiro-color-primary-dark: #cc00cc;
    --mutiro-color-secondary: #00ffff;
    --mutiro-color-accent: #ffff00;
    --mutiro-color-background: #0a0014;
    --mutiro-color-surface: rgba(17, 0, 34, 0.5);
    --mutiro-color-surface-elevated: rgba(34, 0, 51, 0.6);
    --mutiro-color-text-primary: #ff00ff;
    --mutiro-color-text-secondary: #00ffff;
    --mutiro-color-text-muted: #8800cc;
    --mutiro-color-border: #440066;
    --mutiro-color-success: #00ffff;  /* Cyberpunk cyan */
    --mutiro-color-warning: #ffff00;  /* Cyberpunk yellow */
    --mutiro-color-error: #ff00ff;  /* Cyberpunk magenta */
    --mutiro-glow-color: #ff00ff;
}

/* Space Theme - Deep purple */
[data-theme="space"] {
    --mutiro-color-primary: #9966ff;
    --mutiro-color-primary-light: #aa77ff;
    --mutiro-color-primary-dark: #7755cc;
    --mutiro-color-secondary: #ff6699;
    --mutiro-color-accent: #66ffaa;
    --mutiro-color-background: #000000;
    --mutiro-color-surface: rgba(17, 0, 34, 0.3);
    --mutiro-color-surface-elevated: rgba(34, 0, 51, 0.4);
    --mutiro-color-text-primary: #9966ff;
    --mutiro-color-text-secondary: #7755cc;
    --mutiro-color-text-muted: #553399;
    --mutiro-color-border: #330066;
    --mutiro-color-success: #66ffaa;
    --mutiro-color-warning: #ffaa66;
    --mutiro-color-error: #ff6666;
    --mutiro-glow-color: #aa77ff;
}

/* Neon Blue Theme */
[data-theme="neon-blue"] {
    --mutiro-color-primary: #00aaff;
    --mutiro-color-primary-light: #44ccff;
    --mutiro-color-primary-dark: #0088cc;
    --mutiro-color-secondary: #00ffaa;
    --mutiro-color-accent: #44ffff;
    --mutiro-color-background: #000011;
    --mutiro-color-surface: rgba(0, 17, 34, 0.4);
    --mutiro-color-surface-elevated: rgba(0, 34, 68, 0.5);
    --mutiro-color-text-primary: #00aaff;
    --mutiro-color-text-secondary: #0088cc;
    --mutiro-color-text-muted: #005588;
    --mutiro-color-border: #003366;
    --mutiro-color-success: #00ffaa;
    --mutiro-color-warning: #ffaa00;
    --mutiro-color-error: #ff4444;
    --mutiro-glow-color: #44ccff;
}

/* Retro Amber Theme */
[data-theme="retro-amber"] {
    --mutiro-color-primary: #ffaa00;
    --mutiro-color-primary-light: #ffbb33;
    --mutiro-color-primary-dark: #cc8800;
    --mutiro-color-secondary: #ff8800;
    --mutiro-color-accent: #ffcc00;
    --mutiro-color-background: #1a0f00;
    --mutiro-color-surface: rgba(51, 34, 0, 0.3);
    --mutiro-color-surface-elevated: rgba(68, 51, 0, 0.4);
    --mutiro-color-text-primary: #ffaa00;
    --mutiro-color-text-secondary: #cc8800;
    --mutiro-color-text-muted: #886600;
    --mutiro-color-border: #553300;
    --mutiro-color-success: #ffcc00;  /* Amber bright */
    --mutiro-color-warning: #ffaa00;  /* Amber primary */
    --mutiro-color-error: #ff8800;  /* Amber secondary */
    --mutiro-glow-color: #ffbb33;
}

/* Terminal Light Theme - Pure monochrome (black on white) */
[data-theme="terminal-light"] {
    --mutiro-theme-mode: light;
    --mutiro-color-primary: #000000;  /* Pure black */
    --mutiro-color-primary-light: #333333;
    --mutiro-color-primary-dark: #000000;
    --mutiro-color-secondary: #222222;  /* Very dark gray */
    --mutiro-color-accent: #000000;  /* Black */
    --mutiro-color-background: #ffffff;  /* Pure white background */
    --mutiro-color-surface: rgba(240, 240, 240, 0.9);  /* Light gray surface */
    --mutiro-color-surface-elevated: rgba(230, 230, 230, 0.95);
    --mutiro-color-text-primary: #000000;  /* Black text */
    --mutiro-color-text-secondary: #333333;  /* Dark gray text */
    --mutiro-color-text-muted: #666666;  /* Medium gray text */
    --mutiro-color-border: #cccccc;  /* Light gray borders */
    --mutiro-color-success: #000000;
    --mutiro-color-warning: #333333;
    --mutiro-color-error: #000000;
    --mutiro-glow-color: rgba(0, 0, 0, 0.2);  /* Subtle black shadow */
    
    /* Light mode needs these adjustments */
    color-scheme: light;
    --wa-color-brand-on-loud: white;
    --wa-color-success-on-loud: white;
    --wa-color-danger-on-loud: white;
}

/* Aurora Theme - Modern, vibrant, and user-friendly */
[data-theme="aurora"] {
    /* Beautiful gradient-friendly colors inspired by northern lights */
    --mutiro-color-primary: #667eea;  /* Vibrant purple-blue */
    --mutiro-color-primary-light: #7c8ff3;
    --mutiro-color-primary-dark: #5a67d8;
    --mutiro-color-secondary: #48bb78;  /* Fresh green */
    --mutiro-color-accent: #ed64a6;  /* Playful pink */
    --mutiro-color-background: #1a202c;  /* Deep blue-gray */
    --mutiro-color-surface: rgba(45, 55, 72, 0.6);  /* Translucent surfaces */
    --mutiro-color-surface-elevated: rgba(74, 85, 104, 0.8);
    --mutiro-color-text-primary: #f7fafc;  /* Crisp white */
    --mutiro-color-text-secondary: #cbd5e0;  /* Soft gray */
    --mutiro-color-text-muted: #718096;  /* Muted blue-gray */
    --mutiro-color-border: rgba(203, 213, 224, 0.2);  /* Subtle borders */
    --mutiro-color-success: #48bb78;
    --mutiro-color-warning: #f6ad55;  /* Warm orange */
    --mutiro-color-error: #fc8181;  /* Soft red */
    --mutiro-glow-color: #667eea;
    
    /* Custom spacing for modern feel */
    --mutiro-space-3xs: 4px;
    --mutiro-space-2xs: 6px;
    --mutiro-space-xs: 10px;
    --mutiro-space-s: 14px;
    --mutiro-space-m: 18px;
    --mutiro-space-l: 28px;
    --mutiro-space-xl: 36px;
    --mutiro-space-2xl: 48px;
    --mutiro-space-3xl: 56px;
    --mutiro-space-4xl: 72px;
    
    /* Smoother borders */
    --mutiro-border-radius-s: 6px;
    --mutiro-border-radius-m: 12px;
    --mutiro-border-radius-l: 20px;
    --mutiro-border-radius-xl: 32px;
    
    /* Softer glow effect */
    --mutiro-glow-intensity: 0 0 20px;
    
    /* Modern typography */
    --mutiro-line-height-normal: 1.7;
    --mutiro-line-height-relaxed: 1.9;
}

/* High Contrast Theme */
[data-theme="high-contrast"] {
    --mutiro-color-primary: #ffffff;
    --mutiro-color-primary-light: #ffffff;
    --mutiro-color-primary-dark: #cccccc;
    --mutiro-color-secondary: #ffff00;
    --mutiro-color-accent: #00ff00;
    --mutiro-color-background: #000000;
    --mutiro-color-surface: rgba(17, 17, 17, 0.5);
    --mutiro-color-surface-elevated: rgba(34, 34, 34, 0.6);
    --mutiro-color-text-primary: #ffffff;
    --mutiro-color-text-secondary: #cccccc;
    --mutiro-color-text-muted: #888888;
    --mutiro-color-border: #444444;
    --mutiro-color-success: #00ff00;
    --mutiro-color-warning: #ffff00;
    --mutiro-color-error: #ff0000;
    --mutiro-glow-color: #ffffff;
}

/* Sunset Theme - Warm, inviting, and modern */
[data-theme="sunset"] {
    /* Warm sunset gradient colors */
    --mutiro-color-primary: #f56565;  /* Coral red */
    --mutiro-color-primary-light: #fc8181;
    --mutiro-color-primary-dark: #e53e3e;
    --mutiro-color-secondary: #ed8936;  /* Sunset orange */
    --mutiro-color-accent: #9f7aea;  /* Twilight purple */
    --mutiro-color-background: #2d3748;  /* Evening sky dark */
    --mutiro-color-surface: rgba(52, 61, 81, 0.7);
    --mutiro-color-surface-elevated: rgba(74, 85, 104, 0.85);
    --mutiro-color-text-primary: #fef5e7;  /* Warm cream */
    --mutiro-color-text-secondary: #fbd38d;  /* Golden */
    --mutiro-color-text-muted: #a78bfa;  /* Soft purple */
    --mutiro-color-border: rgba(251, 211, 141, 0.3);  /* Golden border */
    --mutiro-color-success: #68d391;  /* Mint green */
    --mutiro-color-warning: #f6e05e;  /* Bright yellow */
    --mutiro-color-error: #fc8181;  /* Soft coral */
    --mutiro-glow-color: #fc8181;
    
    /* Comfortable spacing */
    --mutiro-space-3xs: 3px;
    --mutiro-space-2xs: 5px;
    --mutiro-space-xs: 9px;
    --mutiro-space-s: 13px;
    --mutiro-space-m: 17px;
    --mutiro-space-l: 26px;
    --mutiro-space-xl: 34px;
    --mutiro-space-2xl: 44px;
    --mutiro-space-3xl: 52px;
    --mutiro-space-4xl: 68px;
    
    /* Soft, rounded borders */
    --mutiro-border-radius-s: 8px;
    --mutiro-border-radius-m: 16px;
    --mutiro-border-radius-l: 24px;
    --mutiro-border-radius-xl: 40px;
    
    /* Warm glow */
    --mutiro-glow-intensity: 0 0 30px;
    
    /* Clean, modern fonts */
    --mutiro-font-weight-normal: 400;
    --mutiro-font-weight-medium: 500;
    --mutiro-font-weight-semibold: 600;
    --mutiro-line-height-normal: 1.75;
}

/* Lagoon Theme (Light ocean) */
[data-theme="lagoon"] {
    --mutiro-color-primary: #007088;
    --mutiro-color-primary-light: #0090aa;
    --mutiro-color-primary-dark: #004e66;
    --mutiro-color-secondary: #6666dd;
    --mutiro-color-accent: #00aa88;
    --mutiro-color-background: #e8f4f8;
    --mutiro-color-surface: rgba(245, 250, 252, 0.85);
    --mutiro-color-surface-elevated: rgba(248, 252, 254, 0.95);
    --mutiro-color-text-primary: #002244;
    --mutiro-color-text-secondary: #003e55;
    --mutiro-color-text-muted: #556677;
    --mutiro-color-border: #a0c0d0;
    --mutiro-color-success: #00aa88;
    --mutiro-color-warning: #dd7722;
    --mutiro-color-error: #aa2244;
    --mutiro-glow-color: rgba(0, 136, 187, 0.3);
    
    /* Light mode adjustments */
    color-scheme: light;
    --wa-color-brand-on-loud: white;
    --wa-color-success-on-loud: white;
    --wa-color-danger-on-loud: white;
}

/* Deep Purple Theme */
[data-theme="deep-purple"] {
    --mutiro-color-primary: #6633cc;
    --mutiro-color-primary-light: #8855ee;
    --mutiro-color-primary-dark: #4422aa;
    --mutiro-color-secondary: #cc33cc;
    --mutiro-color-accent: #aa33ff;
    --mutiro-color-background: #0a0014;
    --mutiro-color-surface: rgba(17, 0, 34, 0.4);
    --mutiro-color-surface-elevated: rgba(34, 0, 68, 0.5);
    --mutiro-color-text-primary: #8855ee;
    --mutiro-color-text-secondary: #6633cc;
    --mutiro-color-text-muted: #4422aa;
    --mutiro-color-border: #221166;
    --mutiro-color-success: #aa33ff;  /* Purple accent */
    --mutiro-color-warning: #cc33cc;  /* Purple warning */
    --mutiro-color-error: #ff33ff;  /* Bright purple */
    --mutiro-glow-color: #8855ee;
}

/* Midnight Teal Theme */
[data-theme="midnight-teal"] {
    --mutiro-color-primary: #008888;
    --mutiro-color-primary-light: #00aaaa;
    --mutiro-color-primary-dark: #006666;
    --mutiro-color-secondary: #00aa88;
    --mutiro-color-accent: #00ccaa;
    --mutiro-color-background: #000a0a;
    --mutiro-color-surface: rgba(0, 17, 17, 0.3);
    --mutiro-color-surface-elevated: rgba(0, 34, 34, 0.4);
    --mutiro-color-text-primary: #00aaaa;
    --mutiro-color-text-secondary: #008888;
    --mutiro-color-text-muted: #005555;
    --mutiro-color-border: #003333;
    --mutiro-color-success: #00ccaa;  /* Teal accent */
    --mutiro-color-warning: #00aa88;  /* Teal secondary */
    --mutiro-color-error: #008888;  /* Teal primary */
    --mutiro-glow-color: #00aaaa;
}

/* Neon Pink Theme */
[data-theme="neon-pink"] {
    --mutiro-color-primary: #ff0088;
    --mutiro-color-primary-light: #ff44aa;
    --mutiro-color-primary-dark: #cc0066;
    --mutiro-color-secondary: #ff00ff;
    --mutiro-color-accent: #ff44ff;
    --mutiro-color-background: #140014;
    --mutiro-color-surface: rgba(34, 0, 34, 0.3);
    --mutiro-color-surface-elevated: rgba(51, 0, 51, 0.4);
    --mutiro-color-text-primary: #ff0088;
    --mutiro-color-text-secondary: #cc0066;
    --mutiro-color-text-muted: #880044;
    --mutiro-color-border: #440022;
    --mutiro-color-success: #ff44ff;  /* Pink accent */
    --mutiro-color-warning: #ff00ff;  /* Pink secondary */
    --mutiro-color-error: #ff0088;  /* Pink primary */
    --mutiro-glow-color: #ff44aa;
}

/* Neon Orange Theme */
[data-theme="neon-orange"] {
    --mutiro-color-primary: #ff6600;
    --mutiro-color-primary-light: #ff8833;
    --mutiro-color-primary-dark: #cc5500;
    --mutiro-color-secondary: #ffaa00;
    --mutiro-color-accent: #ffcc00;
    --mutiro-color-background: #140a00;
    --mutiro-color-surface: rgba(34, 17, 0, 0.3);
    --mutiro-color-surface-elevated: rgba(51, 34, 0, 0.4);
    --mutiro-color-text-primary: #ff6600;
    --mutiro-color-text-secondary: #cc5500;
    --mutiro-color-text-muted: #884400;
    --mutiro-color-border: #442200;
    --mutiro-color-success: #ffcc00;  /* Orange accent yellow */
    --mutiro-color-warning: #ffaa00;  /* Orange secondary */
    --mutiro-color-error: #ff6600;  /* Orange primary */
    --mutiro-glow-color: #ff8833;
}

/* Retro Phosphor Theme */
[data-theme="retro-phosphor"] {
    --mutiro-color-primary: #33ff33;
    --mutiro-color-primary-light: #66ff66;
    --mutiro-color-primary-dark: #00cc00;
    --mutiro-color-secondary: #33ff99;
    --mutiro-color-accent: #66ffcc;
    --mutiro-color-background: #001100;
    --mutiro-color-surface: rgba(0, 34, 0, 0.3);
    --mutiro-color-surface-elevated: rgba(0, 51, 0, 0.4);
    --mutiro-color-text-primary: #33ff33;
    --mutiro-color-text-secondary: #00cc00;
    --mutiro-color-text-muted: #008800;
    --mutiro-color-border: #004400;
    --mutiro-color-success: #66ff66;
    --mutiro-color-warning: #ccff33;
    --mutiro-color-error: #ffcc33;
    --mutiro-glow-color: #66ff66;
}

/* Terminal Light Compact Theme - Clean monochrome with reduced spacing */
[data-theme="terminal-light-compact"] {
    --mutiro-theme-mode: light;
    /* Colors - same as terminal-light */
    --mutiro-color-primary: #000000;
    --mutiro-color-primary-light: #333333;
    --mutiro-color-primary-dark: #000000;
    --mutiro-color-secondary: #666666;
    --mutiro-color-accent: #333333;
    --mutiro-color-background: #ffffff;
    --mutiro-color-surface: rgba(240, 240, 240, 0.95);
    --mutiro-color-surface-elevated: rgba(230, 230, 230, 0.98);
    --mutiro-color-text-primary: #000000;
    --mutiro-color-text-secondary: #333333;
    --mutiro-color-text-muted: #666666;
    --mutiro-color-border: #cccccc;
    --mutiro-color-success: #000000;
    --mutiro-color-warning: #333333;
    --mutiro-color-error: #000000;
    --mutiro-glow-color: transparent;
    
    /* COMPACT SPACING - Reduced by ~40% */
    --mutiro-space-3xs: 1px;   /* 0.0625rem - 3x small */
    --mutiro-space-2xs: 2px;   /* 0.125rem - 2x small */
    --mutiro-space-xs: 3px;    /* 0.1875rem - extra small */
    --mutiro-space-s: 5px;     /* 0.3125rem - small */
    --mutiro-space-m: 8px;     /* 0.5rem - medium */
    --mutiro-space-l: 12px;    /* 0.75rem - large */
    --mutiro-space-xl: 16px;   /* 1rem - extra large */
    --mutiro-space-2xl: 20px;  /* 1.25rem - 2x large */
    --mutiro-space-3xl: 24px;  /* 1.5rem - 3x large */
    --mutiro-space-4xl: 32px;  /* 2rem - 4x large */
    --mutiro-space-5xl: 40px;  /* 2.5rem - 5x large */
    --mutiro-space-6xl: 48px;  /* 3rem - 6x large */
    
    /* COMPACT FONT SIZES - Reduced by ~15% */
    --mutiro-font-size-2xs: 0.55rem;  /* 8.8px */
    --mutiro-font-size-xs: 0.65rem;   /* 10.4px */
    --mutiro-font-size-s: 0.75rem;    /* 12px */
    --mutiro-font-size-m: 0.85rem;    /* 13.6px */
    --mutiro-font-size-l: 1rem;       /* 16px */
    --mutiro-font-size-xl: 1.2rem;    /* 19.2px */
    --mutiro-font-size-2xl: 1.5rem;   /* 24px */
    --mutiro-font-size-3xl: 1.875rem; /* 30px */
    --mutiro-font-size-4xl: 2.25rem;  /* 36px */
    --mutiro-font-size-hero: 3rem;    /* 48px */
    
    /* COMPACT BORDER RADIUS - Slightly reduced */
    --mutiro-border-radius-none: 0;
    --mutiro-border-radius-s: 2px;
    --mutiro-border-radius-m: 4px;
    --mutiro-border-radius-l: 6px;
    --mutiro-border-radius-xl: 8px;
    --mutiro-border-radius-pill: 100px;
    --mutiro-border-radius-circle: 50%;
    
    /* Tighter line height for compact feel */
    --mutiro-line-height-tight: 1.1;
    --mutiro-line-height-normal: 1.3;
    --mutiro-line-height-relaxed: 1.4;
    --mutiro-line-height-loose: 1.5;
}

/* Classic Terminal Theme - Pure monochrome (white on black) */
[data-theme="terminal"] {
    --mutiro-color-primary: #f0f0f0;  /* Off-white */
    --mutiro-color-primary-light: #ffffff;
    --mutiro-color-primary-dark: #d0d0d0;
    --mutiro-color-secondary: #e0e0e0;  /* Light gray */
    --mutiro-color-accent: #f5f5f5;  /* Near white */
    --mutiro-color-background: #1a1a1d;  /* Dark charcoal instead of pure black */
    --mutiro-color-surface: #242428;  /* Slightly lighter surface */
    --mutiro-color-surface-elevated: #2e2e33;  /* Elevated surface */
    --mutiro-color-text-primary: #f0f0f0;  /* Off-white text */
    --mutiro-color-text-secondary: #b8b8b8;  /* Light gray text */
    --mutiro-color-text-muted: #808080;  /* Muted gray text */
    --mutiro-color-border: #3a3a3f;  /* Gray borders */
    --mutiro-color-success: #e8e8e8;  /* Light gray */
    --mutiro-color-warning: #d0d0d0;  /* Light gray */
    --mutiro-color-error: #f0f0f0;  /* Off-white */
    --mutiro-glow-color: #f0f0f0;  /* Off-white glow */
}

/* ============================================================================
   UTILITY CLASSES
   ============================================================================ */

/* Text color utilities that use theme variables */
.text-mutiro-primary { color: var(--mutiro-color-primary) !important; }
.text-mutiro-secondary { color: var(--mutiro-color-secondary) !important; }
.text-mutiro-accent { color: var(--mutiro-color-accent) !important; }
.text-mutiro-success { color: var(--mutiro-color-success) !important; }
.text-mutiro-warning { color: var(--mutiro-color-warning) !important; }
.text-mutiro-error { color: var(--mutiro-color-error) !important; }
.text-mutiro-text-primary { color: var(--mutiro-color-text-primary) !important; }
.text-mutiro-text-secondary { color: var(--mutiro-color-text-secondary) !important; }
.text-mutiro-text-muted { color: var(--mutiro-color-text-muted) !important; }

/* Background color utilities */
.bg-mutiro-primary { background-color: var(--mutiro-color-primary) !important; }
.bg-mutiro-secondary { background-color: var(--mutiro-color-secondary) !important; }
.bg-mutiro-accent { background-color: var(--mutiro-color-accent) !important; }
.bg-mutiro-success { background-color: var(--mutiro-color-success) !important; }
.bg-mutiro-warning { background-color: var(--mutiro-color-warning) !important; }
.bg-mutiro-error { background-color: var(--mutiro-color-error) !important; }
.bg-mutiro-background { background-color: var(--mutiro-color-background) !important; }
.bg-mutiro-surface { background-color: var(--mutiro-color-surface) !important; }

/* Border color utilities */
.border-mutiro-primary { border-color: var(--mutiro-color-primary) !important; }
.border-mutiro-border { border-color: var(--mutiro-color-border) !important; }
.border-mutiro-success { border-color: var(--mutiro-color-success) !important; }
.border-mutiro-warning { border-color: var(--mutiro-color-warning) !important; }
.border-mutiro-error { border-color: var(--mutiro-color-error) !important; }

/* ============================================================================
   SCROLLBAR STYLES
   ============================================================================ */

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

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--mutiro-color-border);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--mutiro-color-text-muted);
}

* {
    scrollbar-width: thin;
    scrollbar-color: var(--mutiro-color-border) transparent;
}