/* ===========================================================================
   HavaBet — Design Tokens · AERO / FROST
   Deep midnight navy, ice-blue accents, frosted glass panels. Airy & clean.
   =========================================================================== */
:root {
    --bg-000: #070d18;   /* midnight navy */
    --bg-050: #0b1424;
    --bg-100: #0f1b30;   /* solid cards */
    --bg-150: #15243f;   /* raised */
    --bg-300: #21314f;   /* hairlines */

    --fg-000: #eef6ff;
    --fg-100: #c4d4ea;
    --fg-300: #8497b6;
    --fg-500: #56678a;

    --accent:    #4db8ff;   /* ice blue — primary */
    --accent-2:  #7fdcff;   /* light cyan */
    --aqua:      #38e0c8;   /* aqua secondary */
    --accent-ink:#04101f;
    --status:    #4db8ff;
    --up:        #38e0a0;
    --down:      #ff7a8a;

    --ice-soft: color-mix(in srgb, var(--accent) 16%, var(--bg-100));
    --aqua-soft: color-mix(in srgb, var(--aqua) 14%, var(--bg-100));
    --ice-line: color-mix(in srgb, var(--accent) 38%, var(--bg-300));

    /* glass */
    --glass-bg: color-mix(in srgb, #0f1b30 62%, transparent);
    --glass-brd: color-mix(in srgb, #7fdcff 22%, transparent);
    --glass-blur: 16px;

    --font-display: "Outfit", system-ui, sans-serif;
    --font-body:    "Inter", 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.70rem, 1.85rem + 4.00vw, 4.80rem);

    --lh-tight: 1.04;
    --lh-snug:  1.22;
    --lh-body:  1.64;

    --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: 16px; --r-lg: 22px; --r-xl: 30px; --r-pill: 999px;

    --sh-1: 0 2px 8px rgba(0,0,0,.4);
    --sh-2: 0 16px 40px rgba(2,8,20,.5);
    --sh-3: 0 30px 70px rgba(2,8,20,.6);

    --ease: cubic-bezier(.22,.7,.3,1);
    --t-fast: 160ms; --t-base: 280ms; --t-slow: 480ms;

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