/**
 * Design System Foundation
 * Premium dark glass morphism aesthetic
 * Based on Apple Music / Tesla UI principles
 */

/* ============================================
   CSS RESET & BASE
   ============================================ */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', system-ui, sans-serif;
    background: #0A0A0C;
    color: #FAFAFA;
    min-height: 100vh;
    overflow-x: hidden;
}

/* ============================================
   CSS VARIABLES (DESIGN TOKENS)
   ============================================ */
:root {
    /* Colors - Background Hierarchy */
    --color-bg-0: #0A0A0C;
    --color-bg-1: rgba(18, 18, 22, 0.85);
    --color-bg-2: rgba(26, 26, 32, 0.90);
    --color-bg-3: rgba(34, 34, 42, 0.95);
    
    /* Colors - Text Hierarchy */
    --color-text-primary: #FAFAFA;
    --color-text-secondary: #A0A0A8;
    --color-text-tertiary: #6C6C74;
    --color-text-disabled: #3C3C44;
    
    /* Colors - Accent */
    --color-accent: #0A84FF;
    --color-accent-hover: #2D96FF;
    --color-accent-active: #0071E3;
    --color-accent-muted: rgba(10, 132, 255, 0.15);
    
    /* Colors - Semantic */
    --color-success: #30D158;
    --color-warning: #FFD60A;
    --color-error: #FF453A;
    --color-neutral: #8E8E93;
    
    /* Colors - Strokes */
    --stroke-subtle: rgba(255, 255, 255, 0.08);
    --stroke-medium: rgba(255, 255, 255, 0.12);
    --stroke-strong: rgba(255, 255, 255, 0.20);
    
    /* Spacing Scale (8px base) */
    --space-0_5: 4px;
    --space-1: 8px;
    --space-1_5: 12px;
    --space-2: 16px;
    --space-3: 24px;
    --space-4: 32px;
    --space-6: 48px;
    --space-8: 64px;
    
    /* Typography - Font Families */
    --font-display: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', system-ui, sans-serif;
    --font-mono: 'SF Mono', 'Consolas', 'Monaco', monospace;
    
    /* Typography - Display */
    --type-display-xxl: 64px;
    --type-display-xl: 48px;
    --type-display-l: 36px;
    
    /* Typography - Heading */
    --type-h1: 28px;
    --type-h2: 24px;
    --type-h3: 20px;
    
    /* Typography - Body */
    --type-body-large: 17px;
    --type-body-default: 15px;
    --type-body-small: 13px;
    
    /* Typography - UI */
    --type-button: 15px;
    --type-label: 13px;
    --type-caption: 11px;
    
    /* Typography - Mono */
    --type-mono-large: 20px;
    --type-mono-small: 15px;
    
    /* Border Radius */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-button: 10px;
    
    /* Shadows & Elevation */
    --shadow-0: none;
    --shadow-1: 0 2px 8px rgba(0, 0, 0, 0.2);
    --shadow-2: 0 4px 16px rgba(0, 0, 0, 0.3);
    --shadow-3: 0 8px 32px rgba(0, 0, 0, 0.4);
    --shadow-4: 0 8px 24px rgba(0, 0, 0, 0.5);
    --shadow-5: 0 12px 48px rgba(0, 0, 0, 0.6);
    
    /* Blur */
    --blur-sm: 12px;
    --blur-md: 20px;
    --blur-lg: 24px;
    
    /* Glow Effects */
    --glow-accent: 0 0 24px rgba(10, 132, 255, 0.4);
    --glow-success: 0 0 24px rgba(48, 209, 88, 0.4);
    --glow-error: 0 0 24px rgba(255, 69, 58, 0.4);
    
    /* Animation Timing */
    --timing-instant: 100ms;
    --timing-fast: 200ms;
    --timing-default: 300ms;
    --timing-slow: 500ms;
    --timing-dramatic: 800ms;
    
    /* Animation Easing */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in: cubic-bezier(0.7, 0, 0.84, 0);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    
    /* Layout Dimensions */
    --sidebar-width: 240px;
    --topbar-height: 64px;
    --panel-left-width: 320px;
    --panel-right-width: 280px;
    --panel-gap: 16px;
}

/* ============================================
   UTILITY CLASSES
   ============================================ */

/* Glass Morphism Surfaces */
.glass-1 {
    background: var(--color-bg-1);
    backdrop-filter: blur(var(--blur-md));
    -webkit-backdrop-filter: blur(var(--blur-md));
}

.glass-2 {
    background: var(--color-bg-2);
    backdrop-filter: blur(var(--blur-md));
    -webkit-backdrop-filter: blur(var(--blur-md));
}

.glass-3 {
    background: var(--color-bg-3);
    backdrop-filter: blur(var(--blur-sm));
    -webkit-backdrop-filter: blur(var(--blur-sm));
}

.glass-panel {
    background: var(--color-bg-2);
    backdrop-filter: blur(var(--blur-md));
    -webkit-backdrop-filter: blur(var(--blur-md));
    border: 1px solid var(--stroke-subtle);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-3);
}

/* Stroke Utilities */
.stroke-subtle { border: 1px solid var(--stroke-subtle); }
.stroke-medium { border: 1px solid var(--stroke-medium); }
.stroke-strong { border: 1px solid var(--stroke-strong); }

/* Text Color Utilities */
.text-primary { color: var(--color-text-primary); }
.text-secondary { color: var(--color-text-secondary); }
.text-tertiary { color: var(--color-text-tertiary); }
.text-disabled { color: var(--color-text-disabled); }
.text-accent { color: var(--color-accent); }
.text-success { color: var(--color-success); }
.text-error { color: var(--color-error); }
.text-warning { color: var(--color-warning); }

/* Typography Utilities */
.font-display { font-family: var(--font-display); }
.font-mono { font-family: var(--font-mono); }

.display-xxl { font-size: var(--type-display-xxl); line-height: 1.125; letter-spacing: -0.02em; font-weight: 700; }
.display-xl { font-size: var(--type-display-xl); line-height: 1.167; letter-spacing: -0.01em; font-weight: 700; }
.display-l { font-size: var(--type-display-l); line-height: 1.222; letter-spacing: -0.01em; font-weight: 600; }

.heading-h1 { font-size: var(--type-h1); line-height: 1.286; letter-spacing: -0.01em; font-weight: 600; }
.heading-h2 { font-size: var(--type-h2); line-height: 1.333; font-weight: 600; }
.heading-h3 { font-size: var(--type-h3); line-height: 1.4; font-weight: 500; }

.body-large { font-size: var(--type-body-large); line-height: 1.412; font-weight: 400; }
.body-default { font-size: var(--type-body-default); line-height: 1.467; font-weight: 400; }
.body-small { font-size: var(--type-body-small); line-height: 1.538; font-weight: 400; }

.ui-label { font-size: var(--type-label); line-height: 1; letter-spacing: 0.01em; font-weight: 500; text-transform: uppercase; }
.ui-caption { font-size: var(--type-caption); line-height: 1.455; letter-spacing: 0.02em; font-weight: 500; }

.mono-large { font-family: var(--font-mono); font-size: var(--type-mono-large); line-height: 1.4; font-weight: 600; }
.mono-small { font-family: var(--font-mono); font-size: var(--type-mono-small); line-height: 1.467; font-weight: 500; }

/* Spacing Utilities */
.p-1 { padding: var(--space-1); }
.p-2 { padding: var(--space-2); }
.p-3 { padding: var(--space-3); }
.p-4 { padding: var(--space-4); }

.m-1 { margin: var(--space-1); }
.m-2 { margin: var(--space-2); }
.m-3 { margin: var(--space-3); }
.m-4 { margin: var(--space-4); }

.gap-1 { gap: var(--space-1); }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }

/* Display Utilities */
.hidden { display: none !important; }
.flex { display: flex; }
.flex-col { display: flex; flex-direction: column; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }

/* ============================================
   MOTION & ACCESSIBILITY
   ============================================ */

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Focus Indicators */
:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

button:focus-visible,
a:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
    border-radius: calc(var(--radius-button) + 2px);
}

/* Selection Colors */
::selection {
    background: var(--color-accent-muted);
    color: var(--color-text-primary);
}

/* Scrollbar Styling (Webkit) */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--stroke-medium);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--stroke-strong);
}

/* ============================================
   COMPONENT FOUNDATION
   ============================================ */

/* Button Base */
button {
    font-family: var(--font-display);
    cursor: pointer;
    border: none;
    transition: all var(--timing-fast) var(--ease-out);
    user-select: none;
}

button:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

/* Input Base */
input,
select,
textarea {
    font-family: var(--font-display);
    font-size: var(--type-body-default);
    color: var(--color-text-primary);
    border: none;
    outline: none;
}

input::placeholder,
textarea::placeholder {
    color: var(--color-text-tertiary);
}

/* Link Base */
a {
    color: var(--color-accent);
    text-decoration: none;
    transition: color var(--timing-instant) var(--ease-out);
}

a:hover {
    color: var(--color-accent-hover);
}

/* ============================================
   RESPONSIVE BREAKPOINTS
   ============================================ */
@media (max-width: 1920px) {
    /* Large Desktop - Default */
}

@media (max-width: 1440px) {
    /* Standard Desktop - Minor adjustments */
    :root {
        --panel-right-width: 260px;
    }
}

@media (max-width: 1280px) {
    /* Laptop - Reduce panel widths */
    :root {
        --sidebar-width: 200px;
        --panel-left-width: 280px;
        --panel-right-width: 240px;
        --panel-gap: 12px;
    }
}

@media (max-width: 1024px) {
    /* Minimum Supported - Hide right panel, compact layout */
    :root {
        --sidebar-width: 200px;
        --panel-left-width: 240px;
        --panel-gap: 12px;
    }
    
    body {
        font-size: 14px;
    }
}

@media (max-width: 768px) {
    /* Tablet & Mobile - Responsive layout */
    :root {
        --sidebar-width: 60px; /* Collapsed sidebar on mobile */
        --topbar-height: 56px;
        --panel-left-width: 100%;
        --panel-right-width: 100%;
        --panel-gap: 12px;
        
        /* Reduce font sizes for mobile */
        --type-display-xxl: 36px;
        --type-display-xl: 32px;
        --type-display-l: 24px;
        --type-h1: 22px;
        --type-h2: 20px;
        --type-h3: 18px;
    }
    
    html {
        font-size: 14px;
    }
}

@media (max-width: 480px) {
    /* Small Mobile - Further optimizations */
    :root {
        --space-3: 16px;
        --space-4: 24px;
        --type-h1: 20px;
        --type-h2: 18px;
    }
}