/* ============================================
   SHADOW STYLE SHOP — CSS Variables
   Design: Dark Red / Streetwear
   shadowstyleshop.rs
   ============================================ */

:root {
    /* ── Color Palette ── */
    --bg-primary:      #020202;
    --bg-secondary:    #0a0606;
    --bg-card:         #0e0808;
    --bg-elevated:     #121010;
    --bg-input:        rgba(255, 255, 255, 0.04);
    --border-subtle:   rgba(255, 255, 255, 0.06);
    --border-light:    rgba(255, 255, 255, 0.10);

    /* Accent Colors — Red Theme */
    --red-primary:     #c21d27;
    --red-primary-dim: rgba(194, 29, 39, 0.15);
    --red-dark:        #581014;
    --red-dark-dim:    rgba(88, 16, 20, 0.15);
    --red-bright:      #b41e24;
    --red-light:       #c01922;
    --silver:          #c5c5c5;
    --silver-dim:      rgba(197, 197, 197, 0.12);
    --accent-gold:     #d4a853;
    --accent-green:    #2ecc71;

    /* Legacy alias mapping */
    --neon-pink:       var(--red-primary);
    --neon-pink-dim:   var(--red-primary-dim);
    --neon-cyan:       var(--silver);
    --neon-cyan-dim:   var(--silver-dim);
    --neon-purple:     var(--red-dark);
    --neon-purple-dim: var(--red-dark-dim);
    --neon-yellow:     var(--accent-gold);
    --neon-green:      var(--accent-green);

    /* Text Colors */
    --text-primary:    #fefefe;
    --text-body:       #c2c2c2;
    --text-muted:      #8a8686;
    --text-dim:        #5a5656;

    /* ── Gradients ── */
    --gradient-neon:      linear-gradient(135deg, #b41e24, #581014, #c5c5c5);
    --gradient-pink-cyan: linear-gradient(90deg, #c21d27, #c5c5c5);
    --gradient-red:       linear-gradient(135deg, #b41e24, #c21d27);
    --gradient-dark:      linear-gradient(180deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);
    --gradient-card:      linear-gradient(145deg, rgba(14, 8, 8, 0.9) 0%, rgba(10, 6, 6, 0.95) 100%);
    --gradient-body:      linear-gradient(180deg, #020202 0%, #0a0606 25%, #080505 50%, #0a0606 75%, #020202 100%);
    --gradient-section-1: radial-gradient(ellipse at 20% 50%, rgba(194, 29, 39, 0.06) 0%, transparent 60%),
                          radial-gradient(ellipse at 80% 50%, rgba(197, 197, 197, 0.03) 0%, transparent 60%);
    --gradient-section-2: radial-gradient(ellipse at 80% 30%, rgba(88, 16, 20, 0.06) 0%, transparent 60%),
                          radial-gradient(ellipse at 20% 70%, rgba(194, 29, 39, 0.04) 0%, transparent 60%);
    --gradient-section-3: radial-gradient(ellipse at 50% 0%, rgba(197, 197, 197, 0.04) 0%, transparent 50%),
                          radial-gradient(ellipse at 50% 100%, rgba(194, 29, 39, 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(194, 29, 39, 0.3);
    --border-cyan:    1px solid rgba(197, 197, 197, 0.3);

    /* ── Shadows & Glows ── */
    --glow-pink:     0 0 20px rgba(194, 29, 39, 0.3), 0 0 40px rgba(194, 29, 39, 0.1);
    --glow-cyan:     0 0 20px rgba(197, 197, 197, 0.2), 0 0 40px rgba(197, 197, 197, 0.08);
    --glow-purple:   0 0 20px rgba(88, 16, 20, 0.3), 0 0 40px rgba(88, 16, 20, 0.1);
    --glow-pink-sm:  0 0 10px rgba(194, 29, 39, 0.25);
    --glow-cyan-sm:  0 0 10px rgba(197, 197, 197, 0.15);
    --glow-text-pink: 0 0 10px rgba(194, 29, 39, 0.5);
    --glow-text-cyan: 0 0 10px rgba(197, 197, 197, 0.3);

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

    /* ── 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;
}