/**
 * variables.css - CSS Custom Properties and Design Tokens
 * Global design system variables
 */

:root {
  /* ==========================================================================
     COLOR PALETTE
     ========================================================================== */
  
  /* Brand Colors */
  --color-primary: #4ecdc4;
  --color-primary-light: #7eddd7;
  --color-primary-dark: #3ba39c;
  --color-secondary: #ff6b6b;
  --color-secondary-light: #ff8787;
  --color-secondary-dark: #e55555;
  
  /* Neutral Colors */
  --color-black: #000000;
  --color-white: #ffffff;
  --color-gray-50: #fafafa;
  --color-gray-100: #f5f5f5;
  --color-gray-200: #e5e5e5;
  --color-gray-300: #d4d4d4;
  --color-gray-400: #a3a3a3;
  --color-gray-500: #737373;
  --color-gray-600: #525252;
  --color-gray-700: #404040;
  --color-gray-800: #262626;
  --color-gray-900: #171717;
  --color-gray-950: #0a0a0a;
  
  /* Semantic Colors */
  --color-success: #10b981;
  --color-success-light: #34d399;
  --color-success-dark: #059669;
  --color-warning: #f59e0b;
  --color-warning-light: #fbbf24;
  --color-warning-dark: #d97706;
  --color-error: #ef4444;
  --color-error-light: #f87171;
  --color-error-dark: #dc2626;
  --color-info: #3b82f6;
  --color-info-light: #60a5fa;
  --color-info-dark: #2563eb;
  
  /* ==========================================================================
     THEME COLORS - Dark Theme (Default)
     ========================================================================== */
  
  /* Backgrounds */
  --bg-primary: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
  --bg-secondary: rgba(255, 255, 255, 0.05);
  --bg-tertiary: rgba(255, 255, 255, 0.08);
  --bg-elevated: rgba(255, 255, 255, 0.1);
  --bg-overlay: rgba(0, 0, 0, 0.7);
  --bg-modal: rgba(30, 30, 45, 0.95);
  --bg-hover: rgba(255, 255, 255, 0.1);
  --bg-active: rgba(255, 255, 255, 0.15);
  --bg-disabled: rgba(255, 255, 255, 0.03);
  
  /* Text Colors */
  --text-primary: #ffffff;
  --text-secondary: #a3a3a3;
  --text-tertiary: #737373;
  --text-disabled: #525252;
  --text-inverse: #0a0a0a;
  --text-link: var(--color-primary);
  --text-link-hover: var(--color-primary-light);
  --text-success: var(--color-success-light);
  --text-warning: var(--color-warning-light);
  --text-error: var(--color-error-light);
  --text-info: var(--color-info-light);
  
  /* Border Colors */
  --border-primary: rgba(255, 255, 255, 0.1);
  --border-secondary: rgba(255, 255, 255, 0.2);
  --border-tertiary: rgba(255, 255, 255, 0.05);
  --border-focus: var(--color-primary);
  --border-error: var(--color-error);
  --border-success: var(--color-success);
  
  /* Component Specific */
  --card-bg: var(--bg-secondary);
  --card-border: var(--border-primary);
  --input-bg: rgba(0, 0, 0, 0.3);
  --input-border: var(--border-secondary);
  --button-primary-bg: linear-gradient(135deg, var(--color-secondary) 0%, var(--color-primary) 100%);
  --button-secondary-bg: transparent;
  --sidebar-bg: rgba(20, 20, 35, 0.95);
  --player-bg: rgba(15, 15, 25, 0.98);
  
  /* ==========================================================================
     TYPOGRAPHY
     ========================================================================== */
  
  /* Font Families */
  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, 
               Cantarell, 'Helvetica Neue', sans-serif;
  --font-mono: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 
               'Courier New', monospace;
  
  /* Font Sizes */
  --font-size-xs: 0.75rem;     /* 12px */
  --font-size-sm: 0.875rem;    /* 14px */
  --font-size-base: 1rem;      /* 16px */
  --font-size-lg: 1.125rem;    /* 18px */
  --font-size-xl: 1.25rem;     /* 20px */
  --font-size-2xl: 1.5rem;     /* 24px */
  --font-size-3xl: 1.875rem;   /* 30px */
  --font-size-4xl: 2.25rem;    /* 36px */
  --font-size-5xl: 3rem;       /* 48px */
  --font-size-6xl: 3.75rem;    /* 60px */
  
  /* Font Weights */
  --font-weight-thin: 100;
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;
  --font-weight-black: 900;
  
  /* Line Heights */
  --line-height-none: 1;
  --line-height-tight: 1.25;
  --line-height-snug: 1.375;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.625;
  --line-height-loose: 2;
  
  /* Letter Spacing */
  --letter-spacing-tighter: -0.05em;
  --letter-spacing-tight: -0.025em;
  --letter-spacing-normal: 0;
  --letter-spacing-wide: 0.025em;
  --letter-spacing-wider: 0.05em;
  --letter-spacing-widest: 0.1em;
  
  /* ==========================================================================
     SPACING
     ========================================================================== */
  
  --space-0: 0;
  --space-px: 1px;
  --space-0-5: 0.125rem;   /* 2px */
  --space-1: 0.25rem;      /* 4px */
  --space-1-5: 0.375rem;   /* 6px */
  --space-2: 0.5rem;       /* 8px */
  --space-2-5: 0.625rem;   /* 10px */
  --space-3: 0.75rem;      /* 12px */
  --space-3-5: 0.875rem;   /* 14px */
  --space-4: 1rem;         /* 16px */
  --space-5: 1.25rem;      /* 20px */
  --space-6: 1.5rem;       /* 24px */
  --space-7: 1.75rem;      /* 28px */
  --space-8: 2rem;         /* 32px */
  --space-9: 2.25rem;      /* 36px */
  --space-10: 2.5rem;      /* 40px */
  --space-11: 2.75rem;     /* 44px */
  --space-12: 3rem;        /* 48px */
  --space-14: 3.5rem;      /* 56px */
  --space-16: 4rem;        /* 64px */
  --space-20: 5rem;        /* 80px */
  --space-24: 6rem;        /* 96px */
  --space-28: 7rem;        /* 112px */
  --space-32: 8rem;        /* 128px */
  --space-36: 9rem;        /* 144px */
  --space-40: 10rem;       /* 160px */
  --space-44: 11rem;       /* 176px */
  --space-48: 12rem;       /* 192px */
  --space-52: 13rem;       /* 208px */
  --space-56: 14rem;       /* 224px */
  --space-60: 15rem;       /* 240px */
  --space-64: 16rem;       /* 256px */
  --space-72: 18rem;       /* 288px */
  --space-80: 20rem;       /* 320px */
  --space-96: 24rem;       /* 384px */
  
  /* ==========================================================================
     SIZING
     ========================================================================== */
  
  /* Container Widths */
  --container-xs: 20rem;    /* 320px */
  --container-sm: 24rem;    /* 384px */
  --container-md: 28rem;    /* 448px */
  --container-lg: 32rem;    /* 512px */
  --container-xl: 36rem;    /* 576px */
  --container-2xl: 42rem;   /* 672px */
  --container-3xl: 48rem;   /* 768px */
  --container-4xl: 56rem;   /* 896px */
  --container-5xl: 64rem;   /* 1024px */
  --container-6xl: 72rem;   /* 1152px */
  --container-7xl: 80rem;   /* 1280px */
  --container-full: 100%;
  
  /* Component Heights */
  --header-height: 64px;
  --sidebar-width: 260px;
  --sidebar-collapsed-width: 64px;
  --player-height: 90px;
  --player-collapsed-height: 4px;
  
  /* ==========================================================================
     BORDERS
     ========================================================================== */
  
  /* Border Radius */
  --radius-none: 0;
  --radius-sm: 0.125rem;    /* 2px */
  --radius-default: 0.25rem; /* 4px */
  --radius-md: 0.375rem;    /* 6px */
  --radius-lg: 0.5rem;      /* 8px */
  --radius-xl: 0.75rem;     /* 12px */
  --radius-2xl: 1rem;       /* 16px */
  --radius-3xl: 1.5rem;     /* 24px */
  --radius-full: 9999px;
  
  /* Border Widths */
  --border-width-0: 0;
  --border-width-1: 1px;
  --border-width-2: 2px;
  --border-width-4: 4px;
  --border-width-8: 8px;
  
  /* ==========================================================================
     SHADOWS
     ========================================================================== */
  
  --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
  --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.05);
  --shadow-none: none;
  
  /* Colored Shadows */
  --shadow-primary: 0 10px 25px -5px rgba(78, 205, 196, 0.3);
  --shadow-secondary: 0 10px 25px -5px rgba(255, 107, 107, 0.3);
  --shadow-success: 0 10px 25px -5px rgba(16, 185, 129, 0.3);
  --shadow-error: 0 10px 25px -5px rgba(239, 68, 68, 0.3);
  
  /* ==========================================================================
     TRANSITIONS
     ========================================================================== */
  
  /* Durations */
  --duration-instant: 0ms;
  --duration-fast: 150ms;
  --duration-normal: 250ms;
  --duration-slow: 350ms;
  --duration-slower: 500ms;
  --duration-slowest: 1000ms;
  
  /* Easings */
  --ease-linear: linear;
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  
  /* Predefined Transitions */
  --transition-none: none;
  --transition-all: all var(--duration-normal) var(--ease-in-out);
  --transition-colors: background-color var(--duration-normal) var(--ease-in-out),
                       border-color var(--duration-normal) var(--ease-in-out),
                       color var(--duration-normal) var(--ease-in-out),
                       fill var(--duration-normal) var(--ease-in-out),
                       stroke var(--duration-normal) var(--ease-in-out);
  --transition-opacity: opacity var(--duration-normal) var(--ease-in-out);
  --transition-shadow: box-shadow var(--duration-normal) var(--ease-in-out);
  --transition-transform: transform var(--duration-normal) var(--ease-in-out);
  
  /* ==========================================================================
     Z-INDEX SCALE
     ========================================================================== */
  
  --z-negative: -1;
  --z-0: 0;
  --z-10: 10;
  --z-20: 20;
  --z-30: 30;
  --z-40: 40;
  --z-50: 50;
  --z-auto: auto;
  
  /* Component Z-Index */
  --z-dropdown: 100;
  --z-sidebar: 200;
  --z-header: 300;
  --z-overlay: 400;
  --z-modal: 500;
  --z-player: 600;
  --z-notification: 700;
  --z-tooltip: 800;
  --z-max: 9999;
  
  /* ==========================================================================
     BREAKPOINTS
     ========================================================================== */
  
  --screen-xs: 475px;
  --screen-sm: 640px;
  --screen-md: 768px;
  --screen-lg: 1024px;
  --screen-xl: 1280px;
  --screen-2xl: 1536px;
  
  /* ==========================================================================
     ANIMATIONS
     ========================================================================== */
  
  --animation-spin: spin 1s linear infinite;
  --animation-ping: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
  --animation-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  --animation-bounce: bounce 1s infinite;
  --animation-fade-in: fadeIn var(--duration-normal) var(--ease-out);
  --animation-fade-out: fadeOut var(--duration-normal) var(--ease-out);
  --animation-slide-up: slideUp var(--duration-normal) var(--ease-out);
  --animation-slide-down: slideDown var(--duration-normal) var(--ease-out);
  
  /* ==========================================================================
     GRADIENTS
     ========================================================================== */
  
  --gradient-primary: linear-gradient(135deg, var(--color-secondary) 0%, var(--color-primary) 100%);
  --gradient-dark: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
  --gradient-light: linear-gradient(135deg, #f0f2f5 0%, #ffffff 100%);
  --gradient-neon: linear-gradient(135deg, #ff00ff 0%, #00ffff 100%);
  --gradient-sunset: linear-gradient(135deg, #ff6b6b 0%, #ffd700 100%);
  --gradient-ocean: linear-gradient(135deg, #2e3192 0%, #1bffff 100%);
  
  /* ==========================================================================
     FILTERS
     ========================================================================== */
  
  --blur-sm: blur(4px);
  --blur-md: blur(8px);
  --blur-lg: blur(12px);
  --blur-xl: blur(16px);
  --blur-2xl: blur(24px);
  
  /* ==========================================================================
     GRID
     ========================================================================== */
  
  --grid-cols-1: repeat(1, minmax(0, 1fr));
  --grid-cols-2: repeat(2, minmax(0, 1fr));
  --grid-cols-3: repeat(3, minmax(0, 1fr));
  --grid-cols-4: repeat(4, minmax(0, 1fr));
  --grid-cols-5: repeat(5, minmax(0, 1fr));
  --grid-cols-6: repeat(6, minmax(0, 1fr));
  --grid-cols-7: repeat(7, minmax(0, 1fr));
  --grid-cols-8: repeat(8, minmax(0, 1fr));
  --grid-cols-9: repeat(9, minmax(0, 1fr));
  --grid-cols-10: repeat(10, minmax(0, 1fr));
  --grid-cols-11: repeat(11, minmax(0, 1fr));
  --grid-cols-12: repeat(12, minmax(0, 1fr));
}