/* ===== DESIGN TOKENS — WLT SPACE THEME ===== */:root {  /* Colors: Space */  --space-dark: #05070D;  --space-mid: #0A0E1A;  --space-card: #0F1425;    /* Colors: Text */  --text: #E8EDF9;  --text-muted: #8B94B2;    /* Colors: Brand */  --brand: #7C5CFF;  --brand-glow: #22D3EE;  --accent: #FF6B9D;  --good: #00FF88;  --warning: #FFB800;  --danger: #FF4757;    /* Shadows */  --shadow-xs: 0 2px 8px rgba(0,0,0,0.2);  --shadow-sm: 0 4px 16px rgba(0,0,0,0.3);  --shadow-md: 0 12px 30px rgba(0,0,0,0.4);  --shadow-lg: 0 25px 60px rgba(0,0,0,0.6);  --shadow-soft: 0 8px 24px rgba(34, 211, 238, 0.15);  --shadow-glow: 0 0 32px rgba(124, 92, 255, 0.25);  --border-glass: 1px solid rgba(255,255,255,0.12);    /* Blur & Effects */  --blur: 12px;  --blur-strong: 20px;    /* Transitions */  --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);  --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);  --ease-out-premium: cubic-bezier(0.18, 0.8, 0.24, 1);  --ease-out-fluid: cubic-bezier(0.16, 1, 0.3, 1);  --ease-in-out-smooth: cubic-bezier(0.37, 0, 0.19, 1);    /* Motion Durations */  --motion-micro: 120ms;  --motion-fast: 180ms;  --motion-med: 320ms;  --motion-slow: 620ms;  --motion-long: 900ms;  /* Easings (unified motion language) */  --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);  --ease-out-quint: cubic-bezier(0.23, 1, 0.32, 1);  --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);    /* Spacing Scale */  --space-xs: 0.5rem;  --space-sm: 1rem;  --space-md: 1.5rem;  --space-lg: 2.5rem;  --space-xl: 4rem;  --space-2xl: 6rem;    /* Typography Scale (fluid with clamp) */  --text-xs: 0.75rem;  --text-sm: 0.875rem;  --text-base: 1rem;  --text-lg: 1.125rem;  --text-xl: 1.25rem;  --text-2xl: 1.5rem;  --text-3xl: clamp(1.75rem, 4.5vw, 2.25rem);  --text-4xl: clamp(2rem, 5.5vw, 2.75rem);  --text-5xl: clamp(2.5rem, 7vw, 3.75rem);  --text-6xl: clamp(3rem, 9vw, 4.5rem);  --text-7xl: clamp(3.5rem, 11vw, 5.5rem);    /* Line Heights */  --leading-tight: 1.2;  --leading-normal: 1.6;  --leading-relaxed: 1.8;  --leading-heading: 1.3;    /* Border Radius */  --radius-sm: 4px;  --radius-md: 8px;  --radius-lg: 12px;  --radius-xl: 16px;  --radius-full: 9999px;  /* Icon sizing (standardized hierarchy) */  --icon-xs: 12px;  --icon-sm: 14px;  --icon-md: 16px;  --icon-lg: 20px;  --icon-xl: 24px;  --icon-2xl: 28px;    /* Layout */  --container-max: 1200px;  --container-sm: 800px;  --wrap-pad-inline: clamp(1rem, 3vw, 1.5rem);    /* Surface Glass System */  --surface-card: rgba(15, 20, 37, 0.8);  --surface-panel: rgba(15, 20, 37, 0.6);  --surface-overlay: rgba(5, 7, 13, 0.9);  --border-glass-light: 1px solid rgba(255,255,255,0.08);  --border-glass-medium: 1px solid rgba(255,255,255,0.12);  --glow-subtle: 0 0 24px rgba(124, 92, 255, 0.12);  --glow-medium: 0 0 40px rgba(34, 211, 238, 0.15);    /* Letter Spacing */  --tracking-tight: -0.02em;  --tracking-normal: 0em;  --tracking-wide: 0.04em;  --tracking-wider: 0.08em;  /* Quality-based Adaptive Rendering */  --overlay-opacity: 0.95;  --grain-opacity: 0.012;  --surface-blur: 12px;  --glow-strength: 1;  --scanline-opacity: 0;}/* Quality Levels (applied to html element by QualityController) */html.quality-high {  --overlay-opacity: 0.95;  --grain-opacity: 0.012;  --surface-blur: 12px;  --glow-strength: 1;  --scanline-opacity: 0;}html.quality-med {  --overlay-opacity: 0.85;  --grain-opacity: 0.008;  --surface-blur: 8px;  --glow-strength: 0.8;  --scanline-opacity: 0;}html.quality-low {  --overlay-opacity: 0.7;  --grain-opacity: 0.004;  --surface-blur: 4px;  --glow-strength: 0.5;  --scanline-opacity: 0;}