/* ===========================================================================
   Traclie — Design Tokens  ("Tram Thief" — Melbourne W-class tram nostalgia)
   Worn timber & enamel route-signage · cream ticket stubs · deep burgundy
   upholstery · muted enamel mint as the focal action.
   =========================================================================== */

:root {
    /* ---- Surfaces: deep burgundy / maroon canvas, warm red-brown cast ---- */
    --bg-000: #190d11;   /* page background — darkest upholstery */
    --bg-050: #201317;
    --bg-100: #2a1a20;   /* raised cards */
    --bg-150: #352228;   /* hover / elevated */
    --bg-300: #4a3339;   /* hairline borders (muted burgundy) */

    /* ---- Foreground: printed cream ticket inks ---- */
    --fg-000: #f2e8d4;   /* primary text — cream */
    --fg-100: #dccfb6;   /* secondary */
    --fg-300: #a8977f;   /* muted / captions */
    --fg-500: #6f6051;   /* faint / disabled */

    /* ---- Accents ---- */
    --accent:    #8fbca6;   /* muted enamel mint — primary CTA / Bet / links */
    --accent-2:  #b9bec4;   /* worn chrome — emphasis / badges / secondary */
    --status:    #7fb39c;   /* live / status-ok */
    --up:        #7fae8a;   /* drift up */
    --down:      #c47a6e;   /* drift down */
    --accent-ink:#15261e;   /* deep green-black ink on mint fills */

    /* derived mint tints */
    --accent-soft: color-mix(in srgb, var(--accent) 16%, var(--bg-100));
    --accent-line: color-mix(in srgb, var(--accent) 42%, var(--bg-300));

    /* ---- Typography ---- */
    --font-display: "Fraunces", "Playfair Display", "Georgia", serif;
    --font-body:    "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-mono:    "JetBrains Mono", ui-monospace, "SFMono-Regular", "Cascadia Code", Menlo, monospace;

    /* type scale — 1.25 (major third), fluid */
    --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.25rem);
    --fs-lg:   clamp(1.40rem, 1.25rem + 0.70vw, 1.85rem);
    --fs-xl:   clamp(1.90rem, 1.55rem + 1.60vw, 2.90rem);
    --fs-2xl:  clamp(2.60rem, 1.95rem + 3.00vw, 4.40rem);

    --lh-tight: 1.08;
    --lh-snug:  1.30;
    --lh-body:  1.62;

    /* ---- Spacing — 4px grid ---- */
    --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;

    /* ---- Radii — gently rounded classic corners ---- */
    --r-xs: 4px;  --r-sm: 6px;  --r-md: 8px;  --r-lg: 12px;  --r-pill: 999px;

    /* ---- Elevation — soft, warm, restrained (3 levels) ---- */
    --sh-1: 0 1px 2px rgba(10, 4, 6, 0.45);
    --sh-2: 0 6px 18px rgba(10, 4, 6, 0.40), 0 1px 0 rgba(242, 232, 212, 0.03) inset;
    --sh-3: 0 18px 48px rgba(8, 3, 5, 0.55), 0 1px 0 rgba(242, 232, 212, 0.04) inset;

    /* ---- Motion — tram coasting to a smooth stop ---- */
    --ease: cubic-bezier(.2, .7, .2, 1);
    --t-fast: 160ms;
    --t-base: 220ms;
    --t-slow: 360ms;

    /* ---- Layout ---- */
    --rail-w: 248px;
    --slip-w: 320px;
    --content-max: 1180px;
    --header-h: 64px;
    --rg-h: 40px;

    /* ---- Foxed-paper / enamel grain (faint, performant) ---- */
    --grain: repeating-linear-gradient(
        135deg,
        rgba(242, 232, 212, 0.012) 0px,
        rgba(242, 232, 212, 0.012) 1px,
        transparent 1px,
        transparent 3px
    );
}

@media (prefers-reduced-motion: reduce) {
    :root { --t-fast: 0ms; --t-base: 0ms; --t-slow: 0ms; }
}