/**
 * CSS Variables - Global Design Tokens
 * Centralized theming and design system
 */

:root {
    /* Colors */
    --color-line: #ffffff;
    --color-bg: #000000;
    --color-grid: rgba(50, 50, 50, 0.8);
    --color-grid-text: rgba(180, 180, 180, 0.8);
    --color-control-bg: rgba(0, 0, 0, 0.8);
    --color-slider-track: #333;
    --color-slider-thumb: #ffffff;
    --color-accent: #00dd00;
    --color-warning: #ff9900;
    --color-error: #ff0000;
    
    /* Backgrounds */
    --bg-control-group: rgba(30, 30, 30, 0.4);
    --bg-overlay: rgba(0, 0, 0, 0.95);
    
    /* Borders */
    --border-subtle: rgba(255, 255, 255, 0.05);
    --border-light: rgba(255, 255, 255, 0.1);
    --border-medium: rgba(255, 255, 255, 0.2);
    
    /* Spacing */
    --spacing-xs: 4px;
    --spacing-sm: 6px;
    --spacing-md: 8px;
    --spacing-lg: 10px;
    --spacing-xl: 12px;
    --spacing-2xl: 15px;
    
    /* Typography */
    --font-family: 'SF Mono', 'Monaco', 'Menlo', 'Courier New', monospace;
    --font-size-xs: clamp(9px, 1.2vw, 10px);
    --font-size-sm: clamp(10px, 1.5vw, 11px);
    --font-size-base: clamp(10px, 1.5vw, 12px);
    --font-size-md: clamp(11px, 1.8vw, 14px);
    --font-size-lg: clamp(12px, 2vw, 16px);
    
    /* Sizes */
    --control-height: 24px;
    --control-height-compact: 20px;
    --slider-height: 5px;
    --slider-thumb-size: 15px;
    --slider-thumb-size-compact: 12px;
    --toggle-width: 42px;
    --toggle-height: 20px;
    --toggle-dot-size: 14px;
    
    /* Borders & Radius */
    --radius-sm: 3px;
    --radius-md: 6px;
    --radius-lg: 8px;
    --radius-xl: 20px;
    --radius-full: 50%;
    
    /* Transitions */
    --transition-fast: 0.15s ease;
    --transition-normal: 0.2s ease;
    --transition-slow: 0.3s ease;
    
    /* Shadows */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.7);
    
    /* Z-index layers */
    --z-canvas: 1;
    --z-ruler: 5;
    --z-controls: 100;
    --z-overlay: 1000;
    --z-modal: 2000;
    --z-midi-overlay: 9999;
    --z-tooltip: 10000;
}