/* ===========================================================================
   KnuckleBet — Design Tokens · VELOCITY
   Carbon black, racing red, electric white. Condensed type. Sharp edges.
   =========================================================================== */
:root {
    --bg-000: #0c0c0e;   /* carbon */
    --bg-050: #111114;
    --bg-100: #16161a;   /* panels */
    --bg-150: #1e1e23;   /* raised */
    --bg-300: #2c2c33;   /* hairlines */

    --fg-000: #f4f5f7;
    --fg-100: #c7c9cf;
    --fg-300: #8a8d96;
    --fg-500: #5a5d65;

    --accent:    #ff3b30;   /* racing red — primary */
    --accent-2:  #ff6a5e;   /* light red */
    --steel:     #5b8cff;   /* steel blue secondary */
    --accent-ink:#0c0c0e;
    --status:    #ff3b30;
    --up:        #2fd06e;   /* price up */
    --down:      #ff4d4d;   /* price down */

    --red-soft: color-mix(in srgb, var(--accent) 16%, var(--bg-100));
    --steel-soft: color-mix(in srgb, var(--steel) 14%, var(--bg-100));
    --red-line: color-mix(in srgb, var(--accent) 42%, var(--bg-300));

    --font-display: "Oswald", "Barlow Condensed", system-ui, sans-serif;
    --font-cond:    "Barlow Condensed", "Oswald", sans-serif;
    --font-body:    "Barlow", 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.28rem);
    --fs-lg:   clamp(1.45rem, 1.20rem + 0.95vw, 2.05rem);
    --fs-xl:   clamp(2.10rem, 1.55rem + 2.30vw, 3.40rem);
    --fs-2xl:  clamp(3.00rem, 2.00rem + 4.60vw, 5.60rem);

    --lh-tight: 0.98;
    --lh-snug:  1.12;
    --lh-body:  1.6;

    --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: 0px; --r-sm: 2px; --r-md: 3px; --r-lg: 4px; --r-xl: 6px; --r-pill: 2px;

    --sh-1: 0 1px 0 rgba(0,0,0,.6);
    --sh-2: 0 12px 30px rgba(0,0,0,.6);
    --sh-3: 0 24px 56px rgba(0,0,0,.7);

    --ease: cubic-bezier(.2,.8,.2,1);
    --t-fast: 120ms; --t-base: 200ms; --t-slow: 360ms;

    --rail-w: 320px;
    --content-max: 1300px;
    --header-h: 58px;
    --rg-h: 36px;
    --tick-h: 28px;
}
@media (prefers-reduced-motion: reduce) {
    :root { --t-fast: 0ms; --t-base: 0ms; --t-slow: 0ms; }
}