/* ============================================================================
   SunZ – Design Tokens (single source of truth)
   ----------------------------------------------------------------------------
   Load this FIRST, before any page stylesheet. Every color / spacing / shadow
   used across the site should come from a variable defined here so the whole
   platform (home, profile, shop, rules, wipe, leaderboard …) shares one
   coherent "red + DayZ survival" identity.
   ============================================================================ */

:root {
    /* ---------------------------------------------------------- Brand: Red   */
    --sz-red:            #E53935;   /* primary brand red (from the logo)       */
    --sz-red-bright:     #ff2a2a;   /* neon accent for glows / danger          */
    --sz-red-dark:       #C62828;
    --sz-red-darker:     #8E1F1C;

    /* ------------------------------------------------- Survival accents      */
    --sz-rust:           #ff7a18;   /* rusted metal / warning orange           */
    --sz-amber:          #ffb300;   /* highlights, numbers, ammo               */
    --sz-toxic:          #b6ff3c;   /* "alive / online" toxic green            */
    --sz-cyan:           #19f0ff;   /* data / steam-id / tech accents          */

    /* ------------------------------------------------- Neutral surfaces      */
    --sz-bg:             #0A0A0B;   /* page background                          */
    --sz-bg-2:           #0d0f14;   /* deep atmosphere layer                    */
    --sz-surface:        #14151A;   /* section backgrounds                      */
    --sz-card:           #1C1D22;   /* cards                                    */
    --sz-elevated:       #26272E;   /* hovered / raised cards                   */
    --sz-line:           rgba(255,255,255,.08);  /* hairline borders           */
    --sz-line-red:       rgba(229,57,53,.22);    /* branded borders            */

    /* ------------------------------------------------- Text                  */
    --sz-text:           #F5F6F8;   /* primary text                            */
    --sz-text-2:         #B8BEC7;   /* secondary text                          */
    --sz-text-muted:     #7E8792;   /* muted / meta                            */

    /* ------------------------------------------------- Status                */
    --sz-success:        #4CAF50;
    --sz-warning:        #FF9800;
    --sz-error:          #F44336;
    --sz-info:           #2196F3;

    /* ------------------------------------------------- Gradients             */
    --sz-grad-danger:    linear-gradient(135deg, #ff2a2a 0%, #ff7a18 55%, #ffb300 100%);
    --sz-grad-red:       linear-gradient(135deg, #E53935 0%, #C62828 55%, #8E1F1C 100%);
    --sz-grad-toxic:     linear-gradient(135deg, #b6ff3c 0%, #19f0ff 100%);
    --sz-grad-surface:   linear-gradient(135deg, #1C1D22 0%, #14151A 100%);
    --sz-grad-mesh:
        radial-gradient(1100px 560px at 82% -12%, rgba(255,42,42,.16), transparent 60%),
        radial-gradient(820px 460px at 0% 28%,  rgba(25,240,255,.08), transparent 60%),
        radial-gradient(680px 680px at 50% 112%, rgba(255,122,24,.10), transparent 60%);

    /* ------------------------------------------------- Shadows / glows       */
    --sz-shadow:         0 10px 30px rgba(0,0,0,.5);
    --sz-shadow-sm:      0 4px 14px rgba(0,0,0,.4);
    --sz-glow-red:       0 0 28px rgba(229,57,53,.45);
    --sz-glow-toxic:     0 0 24px rgba(182,255,60,.30);

    /* ------------------------------------------------- Radii                 */
    --sz-r-sm:  8px;
    --sz-r-md:  14px;
    --sz-r-lg:  20px;
    --sz-r-pill: 999px;

    /* ------------------------------------------------- Spacing scale         */
    --sz-1: 4px;
    --sz-2: 8px;
    --sz-3: 12px;
    --sz-4: 16px;
    --sz-5: 24px;
    --sz-6: 32px;
    --sz-7: 48px;
    --sz-8: 64px;
    --sz-9: 96px;

    /* ------------------------------------------------- Typography            */
    --sz-font: 'irnsns', 'SoftNum', system-ui, -apple-system, 'Segoe UI', Tahoma, sans-serif;
    --sz-mono: 'JetBrains Mono', 'Courier New', ui-monospace, monospace;

    /* ------------------------------------------------- Motion                */
    --sz-ease:   cubic-bezier(0.16, 1, 0.3, 1);
    --sz-t-fast: .16s;
    --sz-t-med:  .28s;

    /* --------- Legacy aliases (so old stylesheets keep working) ------------ */
    --primary-red:        var(--sz-red);
    --primary-red-dark:   var(--sz-red-dark);
    --complement-teal:    var(--sz-cyan);
    --complement-teal-dark:#00838F;
    --dark-bg:            var(--sz-bg);
    --dark-surface:       var(--sz-surface);
    --dark-card:          var(--sz-card);
    --dark-elevated:      var(--sz-elevated);
    --text-primary:       var(--sz-text);
    --text-secondary:     var(--sz-text-2);
    --text-muted:         var(--sz-text-muted);
    --success:            var(--sz-success);
    --warning:            var(--sz-warning);
    --error:              var(--sz-error);
    --info:               var(--sz-info);
    --gradient-primary:   var(--sz-grad-red);
    --gradient-complement: var(--sz-grad-toxic);
    --gradient-mixed:     var(--sz-grad-danger);
    --gradient-dark:      var(--sz-grad-surface);
    --shadow-red:         var(--sz-glow-red);
    --shadow-dark:        var(--sz-shadow);
    --glow-red:           var(--sz-glow-red);
    --neon-red:           var(--sz-red-bright);
    --neon-orange:        var(--sz-rust);
    --neon-amber:         var(--sz-amber);
    --neon-toxic:         var(--sz-toxic);
    --neon-cyan:          var(--sz-cyan);
    --bg-deep:            var(--sz-bg);
    --bg-deep-2:          var(--sz-bg-2);
    --gradient-danger:    var(--sz-grad-danger);
    --gradient-toxic:     var(--sz-grad-toxic);
    --gradient-mesh:      var(--sz-grad-mesh);
}

/* Respect users who ask for less motion, globally. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}

/* ============================================================================
   Shared header badges (VIP / PREMIUM) — loaded on EVERY page via this file
   so the nav dropdown looks identical everywhere, not just the homepage.
   ========================================================================== */
.user-badge{
    display:inline-flex; align-items:center;
    font-size: .68rem; font-weight: 800;
    letter-spacing: 1px;
    padding: 2px 8px;
    border-radius: 999px;
    vertical-align: middle;
    line-height: 1.6;
    text-transform: uppercase;
}
.badge-vip{
    color: #1a1400;
    background: linear-gradient(135deg, #ffd54f, #ffb300);
    box-shadow: 0 0 14px rgba(255,179,0,.45);
}
.badge-premium{
    color: #0b0b0b;
    background: linear-gradient(135deg, var(--sz-toxic, #b6ff3c), var(--sz-cyan, #19f0ff));
    box-shadow: 0 0 14px rgba(182,255,60,.4);
}
.dropdown-plan{
    display:flex; align-items:center; gap:.5rem;
    margin-top:.5rem; flex-wrap: wrap;
}
.dropdown-plan .plan-remaining{
    font-size:.78rem; color: var(--sz-text-2, #B8BEC7);
}