/**
 * Soundcheck Design Tokens
 * CSS Custom Properties for theming and consistency
 */

:root {
    /* Z-index layers */
    --z-backdrop: 0;
    --z-blur: 10;
    --z-scrim: 15;
    --z-particles: 20;
    --z-player: 30;
    --z-song-info: 35;
    --z-indicators: 40;
    --z-nav: 45;
    --z-controls: 50;

    /* Colors */
    --color-bg: #000000;
    --color-text: #ffffff;
    --color-text-muted: rgba(255, 255, 255, 0.7);
    --color-accent: #8b5cf6;
    --color-success: #22c55e;
    --color-danger: #ef4444;

    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-normal: 300ms ease;
    --transition-slow: 600ms ease;

    /* Default effect values */
    --blur-amount: 20px;
    --scrim-opacity: 0.7;
    --particle-opacity: 0.1;
    --canvas-opacity: 0.8;

    /* Player sizing */
    --player-width: min(90vw, 640px);
    --player-aspect: 56.25%; /* 16:9 */

    /* Spacing */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;

    /* Border radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-full: 9999px;

    /* Font */
    --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
    --font-size-sm: 12px;
    --font-size-md: 14px;
    --font-size-lg: 18px;
    --font-size-xl: 24px;

    /* Gradient presets */
    --gradient-aurora: #b845ed, #2dd4bf, #f472b6;
    --gradient-sunset: #f97316, #fb923c, #f472b6;
    --gradient-ocean: #06b6d4, #3b82f6, #22d3ee;
    --gradient-cosmic: #8b5cf6, #a855f7, #d946ef;
    --gradient-monochrome: #1a1a1a, #666666, #b3b3b3;
    --gradient-slate: #334155, #64748b, #94a3b8;
    --gradient-neutral: #4d4435, #808080, #b3b3b3;
}