/**
 * Design Tokens & CSS Variables
 * Baseline Style System
 *
 * This file contains all global design tokens extracted from the AudioMixer
 * and related interfaces. Use these variables throughout your applications
 * for consistency.
 */

:root {
	/* ========================================
	   COLOR PALETTE
	   ======================================== */

	/* Neutral Grays - Base Colors */
	--color-black: #000000;
	--color-white: #ffffff;
	--color-gray-darkest: #111111;
	--color-gray-darker: #222222;
	--color-gray-dark: #2a2a2a;
	--color-gray-base: #333333;
	--color-gray-medium: #3a3a3a;
	--color-gray-light: #434343;
	--color-gray-lighter: #555555;
	--color-gray-lightest: #797979;

	/* Panel Colors */
	--color-panel-dark: #303030;
	--color-panel-mid: #3a3a3a;
	--color-panel-light: #434343;
	--color-panel-recessed: #2a2a2a;

	/* Accent Colors */
	--color-gold: #d4af37;
	--color-blue-primary: #3a92f5;
	--color-blue-accent: #3a85ff;
	--color-green-active: #4CAF50;
	--color-green-bright: #8efa00;
	--color-green-success: #2eff2e;
	--color-red-active: #ff3a3a;
	--color-red-error: #ff0000;
	--color-orange-warning: #ffaa00;
	--color-orange-accent: #ffa43d;
	--color-yellow: #ffff00;
	--color-yellow-bright: #fffb00;

	/* Text Colors */
	--color-text-primary: #e0e0e0;
	--color-text-secondary: #f4f8ff;
	--color-text-muted: #a0a0a0;
	--color-text-inverse: #111111;

	/* Background Overlays */
	--color-overlay-light: rgba(255, 255, 255, 0.22);
	--color-overlay-dark: rgba(0, 0, 0, 0.35);
	--color-overlay-medium: rgba(0, 0, 0, 0.45);

	/* ========================================
	   TYPOGRAPHY
	   ======================================== */

	/* Font Families */
	--font-primary: 'Montserrat', 'Segoe UI', Roboto, sans-serif;
	--font-secondary: 'Segoe UI', Roboto, Arial, Helvetica, sans-serif;
	--font-mono: 'Courier New', Courier, monospace;

	/* Font Sizes */
	--font-size-xs: 11px;
	--font-size-sm: 12px;
	--font-size-base: 14px;
	--font-size-md: 16px;
	--font-size-lg: 18px;
	--font-size-xl: 20px;
	--font-size-2xl: 24px;
	--font-size-3xl: 28px;
	--font-size-4xl: 40px;

	/* Font Weights */
	--font-weight-light: 300;
	--font-weight-normal: 400;
	--font-weight-medium: 500;
	--font-weight-semibold: 600;
	--font-weight-bold: 700;

	/* Line Heights */
	--line-height-tight: 1.2;
	--line-height-base: 1.4;
	--line-height-relaxed: 1.6;

	/* Letter Spacing */
	--letter-spacing-tight: 0.02em;
	--letter-spacing-normal: 0.06em;
	--letter-spacing-wide: 0.12em;
	--letter-spacing-wider: 0.5px;
	--letter-spacing-widest: 1.8px;

	/* ========================================
	   SPACING & SIZING
	   ======================================== */

	/* Spacing Scale */
	--space-0: 0;
	--space-1: 3px;
	--space-2: 5px;
	--space-3: 8px;
	--space-4: 10px;
	--space-5: 14px;
	--space-6: 15px;
	--space-7: 20px;
	--space-8: 24px;
	--space-9: 30px;
	--space-10: 40px;

	/* Border Radius */
	--radius-sm: 3px;
	--radius-base: 5px;
	--radius-md: 6px;
	--radius-lg: 8px;
	--radius-xl: 10px;
	--radius-2xl: 14px;
	--radius-full: 50%;

	/* Border Widths */
	--border-width-thin: 1px;
	--border-width-base: 1px;
	--border-width-thick: 2px;
	--border-width-thicker: 3px;

	/* ========================================
	   SHADOWS & EFFECTS
	   ======================================== */

	/* Box Shadows */
	--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
	--shadow-base: 0 2px 5px rgba(0, 0, 0, 0.5);
	--shadow-md: 1px 1px 3px rgba(0, 0, 0, 0.2);
	--shadow-lg: 0 0 10px rgba(0, 0, 0, 0.5);
	--shadow-xl: 0 0 30px rgba(0, 0, 0, 0.8);
	--shadow-inner: inset 0 0 10px rgba(0, 0, 0, 0.5);
	--shadow-inner-sm: inset 0 0 5px rgba(0, 0, 0, 0.5);
	--shadow-inner-md: inset 0 0 8px rgba(0, 0, 0, 0.8);
	--shadow-glow-green: 0 0 8px rgba(142, 250, 0, 0.8);
	--shadow-glow-blue: 0 0 8px rgba(58, 146, 245, 0.8);
	--shadow-glow-orange: 0 0 8px rgba(255, 164, 61, 0.8);

	/* Text Shadows */
	--text-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
	--text-shadow-glow-cyan: 0 0 3px rgba(0, 255, 255, 0.2), 0 0 8px rgba(0, 255, 255, 0.1);
	--text-shadow-glow-green: 0 0 5px rgba(142, 250, 0, 0.8);
	--text-shadow-glow-blue: 0 0 5px rgba(57, 146, 245, 0.8);
	--text-shadow-glow-orange: 0 0 5px rgba(255, 164, 61, 0.8);

	/* ========================================
	   GRADIENTS
	   ======================================== */

	/* Panel Gradients */
	--gradient-panel-dark: linear-gradient(160deg, rgba(38, 38, 38, 0.38) 0%, rgba(38, 38, 38, 0.92) 100%);
	--gradient-radial-highlight: radial-gradient(circle at top left, rgba(255, 255, 255, 0.22), transparent 60%);
	--gradient-radial-metal: radial-gradient(circle at 30% 30%, #c0c0c0, #909090);

	/* Button Gradients */
	--gradient-button-base:
		linear-gradient(to right, #cccccc, rgba(255, 255, 255, 0.7) 2%, rgba(255, 255, 255, 0.7) 98%, #cccccc),
		linear-gradient(to bottom, #aaaaaa, #ffffff 25%, #ffffff 75%, #aaaaaa);

	/* ========================================
	   TRANSITIONS & ANIMATIONS
	   ======================================== */

	--transition-fast: 0.12s ease;
	--transition-base: 0.2s ease;
	--transition-medium: 0.35s ease;
	--transition-slow: 0.5s ease;

	/* ========================================
	   COMPONENT-SPECIFIC TOKENS
	   ======================================== */

	/* Buttons */
	--button-height: 35px;
	--button-height-sm: 20px;
	--button-height-lg: 40px;
	--button-min-width: 70px;
	--button-padding-x: 20px;
	--button-padding-x-sm: 5px;

	/* Forms */
	--input-height: 32px;
	--input-padding: 3px;
	--input-border-color: #d1d1d1;
	--input-border-color-focus: #b8b6b6;
	--input-bg: #ffffff;

	/* Audio Components */
	--slider-track-width: 70px;
	--slider-track-height: 300px;
	--slider-thumb-size: 60px;
	--slider-tick-gap: 28px;
	--slider-tick-short: 12px;

	/* Matrix Mixer */
	--matrix-cell-size: 44px;
	--matrix-button-inactive: #555555;
	--matrix-button-connected: #2eff2e;
	--matrix-button-pending: #ffaa00;

	/* Media Player Cards */
	--card-width-min: 320px;
	--card-width-max: 495px;
	--card-height-min: 425px;
	--card-border-color: #797979;
	--card-gap: 10px;

	/* ========================================
	   Z-INDEX SCALE
	   ======================================== */

	--z-base: 1;
	--z-dropdown: 1000;
	--z-sticky: 1020;
	--z-fixed: 1030;
	--z-modal-backdrop: 1040;
	--z-modal: 1050;
	--z-popover: 1060;
	--z-tooltip: 1070;
}