/* ============================================
   SpicyLinks Design System — CSS Custom Properties
   Premium Dark Luxury Theme
   ============================================ */

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

:root {
    /* ── Core Palette ── */
    --bg:              #0A0A0D;
    --bg-rgb:          10, 10, 13;
    --surface:         #111116;
    --surface-rgb:     17, 17, 22;
    --surface-elevated:#16161D;
    --surface-hover:   #1C1C25;
    --surface-active:  #22222D;

    /* ── Brand Colors ── */
    --primary:         #FF2B55;
    --primary-rgb:     255, 43, 85;
    --primary-light:   #FF4D72;
    --primary-dark:    #E0193F;
    --secondary:       #FF4FA3;
    --secondary-rgb:   255, 79, 163;
    --accent:          #FF7A1A;
    --accent-rgb:      255, 122, 26;
    --accent-light:    #FF944D;

    /* ── Semantic Colors ── */
    --success:         #00D68F;
    --success-rgb:     0, 214, 143;
    --warning:         #FFB547;
    --warning-rgb:     255, 181, 71;
    --danger:          #FF3D71;
    --danger-rgb:      255, 61, 113;
    --info:            #4DA6FF;
    --info-rgb:        77, 166, 255;

    /* ── Text ── */
    --text:            #F5F5F7;
    --text-secondary:  #BBBBC5;
    --text-muted:      #8E8E9A;
    --text-faint:      #5A5A6A;

    /* ── Borders & Dividers ── */
    --border:          rgba(255, 255, 255, 0.06);
    --border-hover:    rgba(255, 255, 255, 0.12);
    --border-active:   rgba(255, 255, 255, 0.18);
    --divider:         rgba(255, 255, 255, 0.04);

    /* ── Gradients ── */
    --gradient-primary:  linear-gradient(135deg, #FF2B55 0%, #FF4FA3 50%, #FF7A1A 100%);
    --gradient-hot:      linear-gradient(135deg, #FF2B55 0%, #FF7A1A 100%);
    --gradient-rose:     linear-gradient(135deg, #FF2B55 0%, #FF4FA3 100%);
    --gradient-sunset:   linear-gradient(135deg, #FF7A1A 0%, #FF4FA3 100%);
    --gradient-surface:  linear-gradient(180deg, var(--surface) 0%, var(--bg) 100%);
    --gradient-glow:     radial-gradient(ellipse at 50% 0%, rgba(var(--primary-rgb), 0.15) 0%, transparent 60%);

    /* ── Shadows ── */
    --shadow-xs:       0 1px 2px rgba(0,0,0,0.3);
    --shadow-sm:       0 2px 8px rgba(0,0,0,0.3);
    --shadow-md:       0 4px 16px rgba(0,0,0,0.35);
    --shadow-lg:       0 8px 32px rgba(0,0,0,0.4);
    --shadow-xl:       0 16px 48px rgba(0,0,0,0.5);
    --shadow-glow:     0 0 20px rgba(var(--primary-rgb), 0.15);
    --shadow-glow-lg:  0 0 40px rgba(var(--primary-rgb), 0.2);
    --shadow-glow-hot: 0 4px 30px rgba(var(--primary-rgb), 0.25), 0 0 60px rgba(var(--primary-rgb), 0.1);

    /* ── Spacing ── */
    --space-2xs: 2px;
    --space-xs:  4px;
    --space-sm:  8px;
    --space-md:  12px;
    --space-lg:  16px;
    --space-xl:  24px;
    --space-2xl: 32px;
    --space-3xl: 48px;
    --space-4xl: 64px;
    --space-5xl: 96px;
    --space-6xl: 128px;

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

    --text-2xs:  0.6875rem;
    --text-xs:   0.75rem;
    --text-sm:   0.8125rem;
    --text-base: 0.9375rem;
    --text-lg:   1.0625rem;
    --text-xl:   1.25rem;
    --text-2xl:  1.5rem;
    --text-3xl:  1.875rem;
    --text-4xl:  2.25rem;
    --text-5xl:  3rem;
    --text-6xl:  3.75rem;
    --text-7xl:  4.5rem;

    --weight-light:    300;
    --weight-regular:  400;
    --weight-medium:   500;
    --weight-semibold: 600;
    --weight-bold:     700;
    --weight-extrabold:800;
    --weight-black:    900;

    --leading-none:    1;
    --leading-tight:   1.15;
    --leading-snug:    1.3;
    --leading-normal:  1.5;
    --leading-relaxed: 1.65;

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

    /* ── Radius ── */
    --radius-xs:   4px;
    --radius-sm:   6px;
    --radius-md:   8px;
    --radius-lg:   12px;
    --radius-xl:   16px;
    --radius-2xl:  20px;
    --radius-3xl:  24px;
    --radius-full: 9999px;

    /* ── Transitions ── */
    --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --duration-fast:   150ms;
    --duration-normal: 250ms;
    --duration-slow:   400ms;
    --transition-fast:   all 150ms var(--ease-out);
    --transition-normal: all 250ms var(--ease-out);
    --transition-slow:   all 400ms var(--ease-out);

    /* ── Z-Index ── */
    --z-base:      1;
    --z-dropdown:  100;
    --z-sticky:    200;
    --z-fixed:     300;
    --z-overlay:   400;
    --z-modal:     500;
    --z-toast:     600;

    /* ── Layout ── */
    --max-width:     1280px;
    --sidebar-width: 260px;
    --header-height: 64px;
    --content-padding: var(--space-xl);
}

@media (max-width: 768px) {
    :root {
        --text-5xl: 2.25rem;
        --text-6xl: 2.75rem;
        --text-7xl: 3.25rem;
        --space-5xl: 64px;
        --space-6xl: 80px;
        --content-padding: var(--space-lg);
    }
}

@media (max-width: 480px) {
    :root {
        --text-4xl: 1.875rem;
        --text-5xl: 2rem;
        --text-6xl: 2.25rem;
        --content-padding: var(--space-md);
    }
}