/* ===========================================================================
   PuntSport — Design Tokens · APEX
   Precision-motorsport UI: cool graphite, signal red, amber instrument numerics.
   Sharp edges (zero radius), fine hairlines, HUD detailing, technical grotesk.
   A premium, German-engineering aesthetic. Distinct from the original prototype.
   =========================================================================== */
:root {
    --bg-000: #0a0a0c;   /* near-black graphite */
    --bg-050: #0e0e12;
    --bg-100: #131318;   /* panels */
    --bg-150: #1b1b22;   /* raised */
    --bg-300: #2a2a32;   /* hairlines */
    --bg-400: #3a3a44;   /* strong hairlines */

    --fg-000: #f4f5f7;   /* instrument white */
    --fg-100: #c7cad1;
    --fg-300: #868a93;
    --fg-500: #585c65;

    --accent:    #e2231a;   /* signal red — primary */
    --accent-2:  #ff453a;   /* light red */
    --accent-dk: #b01009;   /* deep red */
    --on-accent: #ffffff;   /* text on red */
    --accent-ink:#0a0a0c;   /* graphite ink (on light / amber) */
    --amber:     #f4b41a;   /* instrument-cluster amber — odds / numerics */
    --amber-2:   #ffce55;
    --amber-ink: #1a1300;   /* text on amber */
    --steel:     #c8ccd4;   /* brushed-metal secondary */
    --status:    #e2231a;
    --up:        #54c06a;   /* price up (functional) */
    --down:      #ff453a;   /* price down */

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

    /* M tri-stripe — used sparingly as a precision accent divider */
    --m-blue:   #2e9fe6;
    --m-navy:   #14377d;
    --m-stripe: linear-gradient(90deg, var(--m-blue) 0 34%, var(--m-navy) 34% 67%, var(--accent) 67% 100%);
    /* subtle carbon-weave texture for dark panels */
    --carbon: repeating-linear-gradient(45deg, rgba(255,255,255,.012) 0 2px, transparent 2px 4px),
              repeating-linear-gradient(-45deg, rgba(0,0,0,.10) 0 2px, transparent 2px 4px);

    --font-display: "Saira", "Segoe UI", system-ui, sans-serif;
    --font-cond:    "Saira Condensed", "Saira", system-ui, sans-serif;
    --font-body:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-mono:    "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

    --fs-xs:   clamp(0.74rem, 0.71rem + 0.10vw, 0.80rem);
    --fs-sm:   clamp(0.84rem, 0.81rem + 0.12vw, 0.90rem);
    --fs-base: clamp(0.95rem, 0.91rem + 0.18vw, 1.02rem);
    --fs-md:   clamp(1.14rem, 1.06rem + 0.36vw, 1.32rem);
    --fs-lg:   clamp(1.48rem, 1.18rem + 1.05vw, 2.15rem);
    --fs-xl:   clamp(2.10rem, 1.50rem + 2.45vw, 3.55rem);
    --fs-2xl:  clamp(2.85rem, 1.85rem + 4.40vw, 5.40rem);

    --lh-tight: 0.98;
    --lh-snug:  1.12;
    --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;

    /* SHARP — zero radius everywhere (BMW-precision) */
    --r-xs: 0; --r-sm: 0; --r-md: 0; --r-lg: 0; --r-xl: 0; --r-pill: 0;

    --sh-1: 0 1px 0 rgba(0,0,0,.5);
    --sh-2: 0 16px 34px rgba(0,0,0,.55);
    --sh-3: 0 28px 64px rgba(0,0,0,.65);
    --glow: 0 0 0 1px color-mix(in srgb, var(--accent) 60%, transparent), 0 8px 24px color-mix(in srgb, var(--accent) 26%, transparent);

    --ease: cubic-bezier(.16,.84,.24,1);
    --t-fast: 120ms; --t-base: 200ms; --t-slow: 340ms;

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