/* ============================================
   Nyce Music - CSS Design Tokens
   Premium dark-theme music platform
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Outfit:wght@300;400;500;600;700;800&display=swap');

:root {
    /* ── Primary Colors (Neon Red-Orange) ── */
    --primary-50: #FFEEE8;
    --primary-100: #FFD3C4;
    --primary-200: #FFAF91;
    --primary-300: #FF8A5E;
    --primary-400: #FF6C39;
    --primary-500: #FF4E11; /* Vibrant Accent — play button, active scrub bars, alerts */
    --primary-600: #E5440D;
    --primary-700: #C23A0D;
    --primary-800: #9C2F0A;
    --primary-900: #742308;

    /* ── Secondary (Medium Steel Gray, anchored to #5E626A) ── */
    --secondary-50: #F3F4F5;
    --secondary-100: #E2E3E6;
    --secondary-200: #C6C8CD;
    --secondary-300: #A5A8AF;
    --secondary-400: #797D86;
    --secondary-500: #5E626A;
    --secondary-600: #494C53;
    --secondary-700: #35373D;
    --secondary-800: #262830;
    --secondary-900: #18191B;

    /* ── Accent (Deep Burnt Amber, anchored to #3E211A) ── */
    --accent-50: #FBEAE2;
    --accent-100: #F4CDB8;
    --accent-200: #E7A67C;
    --accent-300: #D67F4E;
    --accent-400: #B9612F;
    --accent-500: #9C4B22;
    --accent-600: #7C3C1D;
    --accent-700: #603019;
    --accent-800: #4A2620;
    --accent-900: #3E211A; /* Subtle glows / gradients */

    /* ── Neutrals (mirrors Secondary — dark-charcoal-toned, not warm gray) ── */
    --neutral-50: #F3F4F5;
    --neutral-100: #E2E3E6;
    --neutral-200: #C6C8CD;
    --neutral-300: #A5A8AF;
    --neutral-400: #797D86;
    --neutral-500: #5E626A;
    --neutral-600: #494C53;
    --neutral-700: #35373D;
    --neutral-800: #262830;
    --neutral-900: #18191B;
    --neutral-950: #0F1011;

    /* ── Background Surfaces ── */
    --bg-primary: #18191B;    /* Dominant background */
    --bg-secondary: #1C1D20;
    --bg-tertiary: #1F2023;
    --bg-surface: #222428;    /* Card surfaces */
    --bg-surface-hover: #2B2D32;
    --bg-surface-active: #34363C;
    --bg-glass: rgba(34, 36, 40, 0.6);
    --bg-glass-hover: rgba(43, 45, 50, 0.8);
    --bg-glass-strong: rgba(52, 54, 60, 0.9);
    --bg-overlay: rgba(24, 25, 27, 0.85);
    --bg-card: #222428;       /* Card surfaces */

    /* ── Text Colors ── */
    --text-primary: #FFFFFF;
    --text-secondary: #5E626A; /* Secondary / muted typography */
    --text-tertiary: #484C53;
    --text-muted: #383B41;
    --text-inverse: #18191B;
    --text-link: #FF4E11;
    --text-link-hover: #FF7A47;

    /* ── Borders ── */
    /* Kept transparent by design: depth here comes from shadows + inset
       strokes (see --shadow-card), not visible borders — a bordered card
       and a shadowed card fight each other for the same "edge" cue. */
    --border-default: transparent;
    --border-hover: transparent;
    --border-focus: var(--primary-500);
    --border-error: #EF4444;
    --border-success: #10B981;
    --border-subtle: transparent;

    /* ── Status Colors (semantic — intentionally independent of brand) ── */
    --success-50: #ecfdf5;
    --success-500: #10B981;
    --success-600: #059669;
    --warning-50: #fffbeb;
    --warning-500: #F59E0B;
    --warning-600: #D97706;
    --error-50: #fef2f2;
    --error-500: #EF4444;
    --error-600: #DC2626;
    --info-50: #eff6ff;
    --info-500: #3B82F6;
    --info-600: #2563EB;

    /* ── Gradients ── */
    --gradient-primary: linear-gradient(135deg, #FF4E11 0%, #C23A0D 100%);
    --gradient-secondary: linear-gradient(135deg, #35373D 0%, #222428 100%);
    --gradient-accent: linear-gradient(135deg, #FF4E11 0%, #FF8A5E 100%);
    --gradient-dark: linear-gradient(180deg, #18191B 0%, #0F1011 100%);
    --gradient-mesh: radial-gradient(at 40% 20%, rgba(255, 78, 17, 0.12) 0px, transparent 50%),
                     radial-gradient(at 80% 0%, rgba(62, 33, 26, 0.18) 0px, transparent 50%),
                     radial-gradient(at 0% 50%, rgba(255, 78, 17, 0.06) 0px, transparent 50%),
                     radial-gradient(at 0% 100%, rgba(34, 36, 40, 0.3) 0px, transparent 50%);
    --gradient-card: linear-gradient(135deg, #222428 0%, #1D1E21 100%);
    --gradient-player: linear-gradient(180deg, transparent 0%, rgba(24, 25, 27, 0.98) 100%);
    --gradient-hero: linear-gradient(135deg,
        rgba(62, 33, 26, 0.45) 0%,
        rgba(255, 78, 17, 0.08) 50%,
        rgba(24, 25, 27, 0.92) 100%);

    /* ── Shadows ── */
    --shadow-sm: 0 1px 2px rgba(10, 10, 11, 0.3);
    --shadow-md: 0 4px 6px -1px rgba(10, 10, 11, 0.4), 0 2px 4px -2px rgba(10, 10, 11, 0.3);
    --shadow-lg: 0 10px 15px -3px rgba(10, 10, 11, 0.5), 0 4px 6px -4px rgba(10, 10, 11, 0.4);
    --shadow-xl: 0 20px 25px -5px rgba(10, 10, 11, 0.5), 0 8px 10px -6px rgba(10, 10, 11, 0.4);
    --shadow-2xl: 0 25px 50px -12px rgba(10, 10, 11, 0.6);
    --shadow-glow: 0 0 20px rgba(255, 78, 17, 0.35);
    --shadow-glow-amber: 0 0 24px rgba(62, 33, 26, 0.5);
    --shadow-glow-pink: 0 0 20px rgba(236, 72, 153, 0.3);
    --shadow-glow-cyan: 0 0 20px rgba(6, 182, 212, 0.3);
    --shadow-inner: inset 0 2px 4px rgba(10, 10, 11, 0.3);
    /* Skeuomorphic card depth: outer drop shadow + a hairline light inner
       stroke along the top edge, so modules on #222428 read as extruded
       from the canvas rather than flat. */
    --shadow-card: 0 8px 20px rgba(10, 10, 11, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.04);
    --shadow-card-hover: 0 12px 28px rgba(10, 10, 11, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.06);

    /* ── Typography ── */
    --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-display: 'Outfit', 'Inter', sans-serif;
    --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

    --text-xs: 0.75rem;      /* 12px */
    --text-sm: 0.875rem;     /* 14px */
    --text-base: 1rem;       /* 16px */
    --text-lg: 1.125rem;     /* 18px */
    --text-xl: 1.25rem;      /* 20px */
    --text-2xl: 1.5rem;      /* 24px */
    --text-3xl: 1.875rem;    /* 30px */
    --text-4xl: 2.25rem;     /* 36px */
    --text-5xl: 3rem;        /* 48px */
    --text-6xl: 3.75rem;     /* 60px */
    --text-7xl: 4.5rem;      /* 72px */

    --leading-none: 1;
    --leading-tight: 1.25;
    --leading-snug: 1.375;
    --leading-normal: 1.5;
    --leading-relaxed: 1.625;

    --tracking-tight: -0.025em;
    --tracking-normal: 0;
    --tracking-wide: 0.025em;
    --tracking-wider: 0.05em;

    /* ── Spacing ── */
    --space-0: 0;
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --space-24: 6rem;
    --space-32: 8rem;

    /* ── Border Radius ── */
    --radius-sm: 0.375rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    --radius-2xl: 1.5rem;
    --radius-full: 9999px;

    /* ── Transitions ── */
    --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-spring: 500ms cubic-bezier(0.175, 0.885, 0.32, 1.275);

    /* ── Z-Index Scale ── */
    --z-below: -1;
    --z-base: 0;
    --z-above: 10;
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-sidebar: 300;
    --z-header: 400;
    --z-overlay: 500;
    --z-modal: 600;
    --z-player: 700;
    --z-toast: 800;
    --z-tooltip: 900;
    --z-max: 9999;

    /* ── Layout ── */
    --sidebar-width: 260px;
    --sidebar-collapsed-width: 72px;
    --header-height: 64px;
    --player-height: 90px;
    --content-max-width: 1400px;
    --container-padding: var(--space-6);
}

/* ── Dark mode is default, light mode override ── */
[data-theme="light"] {
    --bg-primary: #F8FAFC;
    --bg-secondary: #FFFFFF;
    --bg-tertiary: #F1F5F9;
    --bg-surface: rgba(0, 0, 0, 0.03);
    --bg-surface-hover: rgba(0, 0, 0, 0.05);
    --bg-glass: rgba(255, 255, 255, 0.7);
    --bg-card: rgba(255, 255, 255, 0.9);
    --text-primary: #0F172A;
    --text-secondary: #475569;
    --text-tertiary: #94A3B8;
    --border-default: rgba(0, 0, 0, 0.08);
    --border-hover: rgba(0, 0, 0, 0.15);
}