/* ============================================
   JUPITER PLANET XXL — Neon Cyberpunk Theme
   Design 3: variables.css
   ============================================ */

:root {
    /* ── Core Colors ── */
    --color-bg:              #050508;
    --color-bg-alt:          #0a0a10;
    --color-bg-card:         rgba(255, 255, 255, 0.03);
    --color-bg-card-hover:   rgba(255, 255, 255, 0.06);
    --color-surface:         rgba(10, 10, 20, 0.85);

    /* ── Neon Accents ── */
    --neon-pink:             #ff2d75;
    --neon-pink-glow:        rgba(255, 45, 117, 0.6);
    --neon-cyan:             #00d4ff;
    --neon-cyan-glow:        rgba(0, 212, 255, 0.6);
    --neon-purple:           #9b59b6;
    --neon-purple-glow:      rgba(155, 89, 182, 0.5);
    --neon-yellow:           #ffe156;

    /* ── Text ── */
    --text-primary:          #ffffff;
    --text-body:             #e0e0e0;
    --text-muted:            #8888a0;
    --text-dim:              #555570;

    /* ── 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, #050508 0%, #0a0a18 100%);

    /* ── 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:                3.5rem;
    --fs-hero:               clamp(2.5rem, 6vw, 5rem);

    --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.6;
    --lh-relaxed:            1.8;

    --ls-tight:              -0.02em;
    --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-max:         1280px;
    --container-narrow:      960px;
    --container-wide:        1440px;
    --header-height:         70px;

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

    --border-subtle:         1px solid rgba(255, 255, 255, 0.06);
    --border-neon-pink:      1px solid var(--neon-pink);
    --border-neon-cyan:      1px solid var(--neon-cyan);

    /* ── Shadows & Glows ── */
    --glow-pink:             0 0 15px var(--neon-pink-glow), 0 0 30px rgba(255, 45, 117, 0.3);
    --glow-cyan:             0 0 15px var(--neon-cyan-glow), 0 0 30px rgba(0, 212, 255, 0.3);
    --glow-purple:           0 0 15px var(--neon-purple-glow);
    --glow-text-pink:        0 0 10px var(--neon-pink-glow), 0 0 20px rgba(255, 45, 117, 0.3);
    --glow-text-cyan:        0 0 10px var(--neon-cyan-glow), 0 0 20px rgba(0, 212, 255, 0.3);

    --shadow-card:           0 4px 30px rgba(0, 0, 0, 0.5);
    --shadow-elevated:       0 8px 40px rgba(0, 0, 0, 0.6);

    /* ── Transitions ── */
    --transition-fast:       0.2s ease;
    --transition-base:       0.3s ease;
    --transition-slow:       0.5s ease;
    --transition-bounce:     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;
}