/* ============================================
   JUPITER PLANET XXL — CSS Variables
   Design: Neon Cyberpunk (Enhanced)
   jupiter.svilenkovic.rs
   ============================================ */

:root {
    /* ── Color Palette ── */
    --bg-primary:      #050508;
    --bg-secondary:    #0a0a10;
    --bg-card:         #0e0e16;
    --bg-elevated:     #12121a;
    --bg-input:        rgba(255, 255, 255, 0.04);
    --border-subtle:   rgba(255, 255, 255, 0.06);
    --border-light:    rgba(255, 255, 255, 0.10);

    /* Neon Accent Colors */
    --neon-pink:       #ff2d75;
    --neon-pink-dim:   rgba(255, 45, 117, 0.15);
    --neon-cyan:       #00d4ff;
    --neon-cyan-dim:   rgba(0, 212, 255, 0.15);
    --neon-purple:     #9b59b6;
    --neon-purple-dim: rgba(155, 89, 182, 0.15);
    --neon-yellow:     #ffe156;
    --neon-green:      #00ff88;

    /* Text Colors */
    --text-primary:    #f0eef5;
    --text-body:       #c8c5d0;
    --text-muted:      #8a8694;
    --text-dim:        #5a5666;

    /* ── Gradients ── */
    --gradient-neon:      linear-gradient(135deg, var(--neon-pink), var(--neon-purple), var(--neon-cyan));
    --gradient-pink-cyan: linear-gradient(90deg, var(--neon-pink), var(--neon-cyan));
    --gradient-dark:      linear-gradient(180deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);
    --gradient-card:      linear-gradient(145deg, rgba(14, 14, 22, 0.9) 0%, rgba(10, 10, 16, 0.95) 100%);
    --gradient-body:      linear-gradient(180deg, #050508 0%, #0a0a14 25%, #080812 50%, #0a0a10 75%, #050508 100%);
    --gradient-section-1: radial-gradient(ellipse at 20% 50%, rgba(255, 45, 117, 0.06) 0%, transparent 60%),
                          radial-gradient(ellipse at 80% 50%, rgba(0, 212, 255, 0.04) 0%, transparent 60%);
    --gradient-section-2: radial-gradient(ellipse at 80% 30%, rgba(155, 89, 182, 0.06) 0%, transparent 60%),
                          radial-gradient(ellipse at 20% 70%, rgba(255, 45, 117, 0.04) 0%, transparent 60%);
    --gradient-section-3: radial-gradient(ellipse at 50% 0%, rgba(0, 212, 255, 0.06) 0%, transparent 50%),
                          radial-gradient(ellipse at 50% 100%, rgba(255, 45, 117, 0.04) 0%, transparent 50%);

    /* ── Typography ── */
    --font-heading:    'Space Grotesk', sans-serif;
    --font-body:       'Inter', sans-serif;

    --fs-xs:    0.75rem;
    --fs-sm:    0.875rem;
    --fs-base:  1rem;
    --fs-md:    1.125rem;
    --fs-lg:    1.25rem;
    --fs-xl:    1.5rem;
    --fs-2xl:   2rem;
    --fs-3xl:   2.5rem;
    --fs-4xl:   3rem;
    --fs-5xl:   4rem;

    --fw-light:    300;
    --fw-regular:  400;
    --fw-medium:   500;
    --fw-semibold: 600;
    --fw-bold:     700;

    --lh-tight:    1.1;
    --lh-snug:     1.3;
    --lh-normal:   1.5;
    --lh-relaxed:  1.7;

    --ls-tight:   -0.02em;
    --ls-normal:   0;
    --ls-wide:     0.05em;
    --ls-wider:    0.1em;
    --ls-widest:   0.2em;

    /* ── Spacing ── */
    --space-xs:   0.25rem;
    --space-sm:   0.5rem;
    --space-md:   1rem;
    --space-lg:   1.5rem;
    --space-xl:   2rem;
    --space-2xl:  3rem;
    --space-3xl:  4rem;
    --space-4xl:  6rem;
    --space-5xl:  8rem;

    /* ── Layout ── */
    --container-sm:  800px;
    --container-md:  1100px;
    --container-lg:  1300px;
    --header-height: 70px;

    /* ── Borders & Radii ── */
    --radius-xs:   4px;
    --radius-sm:   8px;
    --radius-md:   12px;
    --radius-lg:   16px;
    --radius-full: 9999px;

    --border-card:    1px solid rgba(255, 255, 255, 0.06);
    --border-neon:    1px solid rgba(255, 45, 117, 0.3);
    --border-cyan:    1px solid rgba(0, 212, 255, 0.3);

    /* ── Shadows & Glows ── */
    --glow-pink:     0 0 20px rgba(255, 45, 117, 0.3), 0 0 40px rgba(255, 45, 117, 0.1);
    --glow-cyan:     0 0 20px rgba(0, 212, 255, 0.3), 0 0 40px rgba(0, 212, 255, 0.1);
    --glow-purple:   0 0 20px rgba(155, 89, 182, 0.3), 0 0 40px rgba(155, 89, 182, 0.1);
    --glow-pink-sm:  0 0 10px rgba(255, 45, 117, 0.2);
    --glow-cyan-sm:  0 0 10px rgba(0, 212, 255, 0.2);
    --glow-text-pink: 0 0 10px rgba(255, 45, 117, 0.5);
    --glow-text-cyan: 0 0 10px rgba(0, 212, 255, 0.5);

    --shadow-sm:     0 2px 8px rgba(0, 0, 0, 0.3);
    --shadow-md:     0 4px 20px rgba(0, 0, 0, 0.4);

    /* ── Transitions ── */
    --transition-fast:  0.15s ease;
    --transition-base:  0.3s ease;
    --transition-slow:  0.5s ease;
    --transition-spring: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);

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