/* ===========================================================================
   TABtouch — Design Tokens · PULSE
   Deep indigo-navy base, electric-blue primary, magenta "touch" accent.
   Modern, sporty, high-contrast.
   =========================================================================== */
:root {
    --bg-base:    #0e1024;   /* indigo navy */
    --bg-sunk:    #090b1c;
    --bg-surface: #171a35;   /* cards */
    --bg-raised:  #20244a;   /* raised panels */
    --bg-line:    #313760;   /* hairlines */
    --bg-line-2:  #272c52;

    --fg-strong: #f3f4fc;
    --fg:        #c6cae8;
    --fg-soft:   #9197c4;
    --fg-faint:  #636a98;

    --brand:     #5b8cff;    /* electric blue — primary */
    --brand-2:   #86a9ff;    /* lighter blue */
    --accent:    #ff5ca0;    /* magenta "touch" — secondary accent */
    --accent-2:  #ff8cc0;
    --brand-ink: #07112e;    /* text on brand fills */
    --win:       #36d39a;
    --loss:      #ff6f7d;

    --brand-soft:  color-mix(in srgb, var(--brand) 18%, var(--bg-surface));
    --accent-soft: color-mix(in srgb, var(--accent) 16%, var(--bg-surface));
    --brand-line:  color-mix(in srgb, var(--brand) 42%, var(--bg-line));

    /* panel surface (flat, performant — minimal blur) */
    --panel-bg:  #171a35;
    --panel-brd: #2b315a;

    --font-display: "Space Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-body:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-mono:    "Space 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.20rem);
    --fs-2xl:  clamp(2.60rem, 1.85rem + 3.60vw, 4.40rem);

    --lh-tight: 1.05;
    --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: 6px; --r-sm: 10px; --r-md: 14px; --r-lg: 18px; --r-xl: 26px; --r-pill: 999px;

    --sh-1: 0 1px 2px rgba(0,0,0,.45);
    --sh-2: 0 14px 34px rgba(4,6,18,.5);
    --sh-3: 0 26px 60px rgba(4,6,18,.6);

    /* depth & glow */
    --glow-brand:  0 0 0 1px color-mix(in srgb, var(--brand) 30%, transparent), 0 8px 30px -8px color-mix(in srgb, var(--brand) 60%, transparent);
    --glow-accent: 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent), 0 8px 30px -8px color-mix(in srgb, var(--accent) 60%, transparent);
    --ring: 0 0 0 3px color-mix(in srgb, var(--brand) 32%, transparent);
    --grad-brand: linear-gradient(135deg, var(--brand) 0%, #7b6bff 55%, var(--accent) 120%);
    --grad-text:  linear-gradient(100deg, var(--brand-2) 0%, #b69bff 45%, var(--accent-2) 100%);
    --hairline: linear-gradient(90deg, transparent, var(--bg-line) 18%, var(--bg-line) 82%, transparent);

    --ease: cubic-bezier(.22,.7,.3,1);
    --t-fast: 150ms; --t-base: 260ms; --t-slow: 460ms;

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