/* ===========================================================================
   JuicyBet — Design Tokens · NEON ARENA
   Vibrant magenta/cyan arcade on a deep violet-black canvas. Glow everywhere.
   =========================================================================== */
:root {
    /* ---- Surfaces ---- */
    --bg-000: #0a0612;   /* page */
    --bg-050: #100a1d;
    --bg-100: #160e26;   /* cards */
    --bg-150: #1e1433;   /* hover / raised */
    --bg-300: #2c2046;   /* hairlines */

    /* ---- Foreground ---- */
    --fg-000: #f4eefe;
    --fg-100: #d3c8ea;
    --fg-300: #9b8ec4;
    --fg-500: #6a5e90;

    /* ---- Accents ---- */
    --accent:    #ff2bd6;   /* magenta — primary / bet */
    --accent-2:  #22e0ff;   /* cyan — secondary / links */
    --accent-3:  #b6ff3c;   /* lime — highlights */
    --accent-ink:#0a0612;
    --status:    #22e0ff;
    --up:        #4dffb0;
    --down:      #ff5d7a;

    --accent-soft: color-mix(in srgb, var(--accent) 16%, var(--bg-100));
    --cyan-soft:   color-mix(in srgb, var(--accent-2) 16%, var(--bg-100));
    --accent-line: color-mix(in srgb, var(--accent) 40%, var(--bg-300));

    /* glow shadows */
    --glow-mag: 0 0 0 1px color-mix(in srgb, var(--accent) 55%, transparent), 0 0 24px -4px var(--accent);
    --glow-cyan: 0 0 0 1px color-mix(in srgb, var(--accent-2) 55%, transparent), 0 0 24px -4px var(--accent-2);

    /* ---- Typography ---- */
    --font-display: "Sora", "Space Grotesk", system-ui, sans-serif;
    --font-body:    "Space Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-mono:    "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

    --fs-xs:   clamp(0.72rem, 0.70rem + 0.10vw, 0.78rem);
    --fs-sm:   clamp(0.82rem, 0.80rem + 0.12vw, 0.88rem);
    --fs-base: clamp(0.94rem, 0.90rem + 0.18vw, 1.00rem);
    --fs-md:   clamp(1.12rem, 1.05rem + 0.35vw, 1.25rem);
    --fs-lg:   clamp(1.40rem, 1.20rem + 0.90vw, 2.00rem);
    --fs-xl:   clamp(2.00rem, 1.50rem + 2.20vw, 3.30rem);
    --fs-2xl:  clamp(2.80rem, 1.90rem + 4.20vw, 5.40rem);

    --lh-tight: 1.02;
    --lh-snug:  1.28;
    --lh-body:  1.62;

    --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem;
    --sp-5: 1.5rem;  --sp-6: 2rem;   --sp-7: 3rem;    --sp-8: 4rem; --sp-9: 6rem;

    --r-xs: 6px; --r-sm: 10px; --r-md: 14px; --r-lg: 20px; --r-xl: 28px; --r-pill: 999px;

    --sh-1: 0 1px 2px rgba(0,0,0,.5);
    --sh-2: 0 10px 30px rgba(0,0,0,.5);
    --sh-3: 0 26px 60px rgba(0,0,0,.6);

    --ease: cubic-bezier(.2,.7,.2,1);
    --t-fast: 150ms; --t-base: 240ms; --t-slow: 420ms;

    --rail-w: 244px;
    --slip-w: 320px;
    --content-max: 1240px;
    --header-h: 62px;
    --rg-h: 38px;
    --ticker-h: 30px;
}
@media (prefers-reduced-motion: reduce) {
    :root { --t-fast: 0ms; --t-base: 0ms; --t-slow: 0ms; }
}