/* ===========================================================================
   JungleBet — Design Tokens · JUNGLE
   Deep forest canvas, leaf-green primary, amber & terracotta accents. Organic.
   =========================================================================== */
:root {
    --bg-000: #0a140d;   /* deep forest floor */
    --bg-050: #0e1b12;
    --bg-100: #122318;   /* cards */
    --bg-150: #18301f;   /* raised */
    --bg-300: #244632;   /* hairlines (mossy) */

    --fg-000: #f0f6ec;
    --fg-100: #cfe0c8;
    --fg-300: #93a98c;
    --fg-500: #62795c;

    --accent:    #4fc36e;   /* leaf green — primary / bet */
    --accent-2:  #76e08f;   /* bright leaf */
    --amber:     #e0953f;   /* amber */
    --clay:      #c8623a;   /* terracotta */
    --accent-ink:#06120a;
    --status:    #76e08f;
    --up:        #76e08f;
    --down:      #e07d63;

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

    --font-display: "Bricolage Grotesque", "Familjen Grotesk", system-ui, sans-serif;
    --font-body:    "Familjen 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.95rem, 0.91rem + 0.18vw, 1.02rem);
    --fs-md:   clamp(1.14rem, 1.05rem + 0.40vw, 1.30rem);
    --fs-lg:   clamp(1.45rem, 1.22rem + 0.85vw, 2.05rem);
    --fs-xl:   clamp(2.05rem, 1.55rem + 2.10vw, 3.30rem);
    --fs-2xl:  clamp(2.80rem, 1.90rem + 4.10vw, 5.00rem);

    --lh-tight: 1.04;
    --lh-snug:  1.24;
    --lh-body:  1.66;

    --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: 4.5rem; --sp-9: 6.5rem;

    --r-xs: 8px; --r-sm: 12px; --r-md: 18px; --r-lg: 26px; --r-xl: 36px; --r-pill: 999px;

    --sh-1: 0 2px 6px rgba(0,0,0,.4);
    --sh-2: 0 14px 36px rgba(0,0,0,.45);
    --sh-3: 0 28px 64px rgba(0,0,0,.55);

    --ease: cubic-bezier(.34,.7,.28,1);
    --t-fast: 170ms; --t-base: 300ms; --t-slow: 560ms;

    --content-max: 1140px;
    --header-h: 60px;
    --rg-h: 38px;
}
@media (prefers-reduced-motion: reduce) {
    :root { --t-fast: 0ms; --t-base: 0ms; --t-slow: 0ms; }
}