/* ===== Design Tokens =====
 * Single source of truth for colors, type scale, spacing, shadows, radii,
 * and acrylic blur surfaces. Loaded first by base.html — sport-specific
 * sheets must NOT redefine :root tokens; override individual selectors only.
 */

:root {
    /* Text */
    --color-text-primary: #111827;
    --color-text-secondary: #374151;
    --color-text-tertiary: #6b7280;
    --color-text-dimmed: #9ca3af;

    /* Backgrounds */
    --color-bg-primary: #ffffff;
    --color-bg-secondary: #f9fafb;
    --color-bg-tertiary: #f3f4f6;
    --color-bg-muted: #e5e7eb;

    /* Borders */
    --color-border: #e5e7eb;
    --color-border-light: #f3f4f6;
    --color-border-strong: #d1d5db;

    /* Interactive */
    --color-link: #2563eb;
    --color-link-hover: #1d4ed8;
    --color-accent: #3b82f6;

    /* Semantic: Win/Lose/Push */
    --color-win: #10b981;
    --color-win-strong: #059669;
    --color-win-bg: rgba(34, 211, 153, 0.40);
    --color-win-bg-solid: #ecfdf5;
    --color-win-bg-solid-strong: #d1fae5;
    --color-lose: #ef4444;
    --color-lose-strong: #dc2626;
    --color-lose-bg: rgba(248, 113, 113, 0.40);
    --color-lose-bg-solid: #fef2f2;
    --color-lose-bg-solid-strong: #fee2e2;
    --color-push-bg: rgba(234, 179, 8, 0.15);

    /* Injury status */
    --color-injury-out: #FF3300;
    --color-injury-doubtful: #FF9900;
    --color-injury-questionable: #FFFF00;
    --color-injury-probable: #66FF00;
    --color-injury-available: #00EE00;

    /* Flash messages */
    --color-flash-bg: #cae6f6;
    --color-flash-border: #377ba8;

    /* Live state (e.g. in-progress games) — not in win/lose because
       this is a status indicator, not a betting outcome. */
    --color-live: #ff3344;
    --color-live-bg-soft: rgba(255, 51, 68, 0.12);
    --color-live-border: rgba(255, 51, 68, 0.3);
    --color-live-border-strong: rgba(255, 51, 68, 0.4);

    /* Translucent surfaces — used for hover states, acrylic separators,
       and soft accent fills. The accent-bg-soft canonicalizes the various
       3b82f6 alphas (10/12/15%) that crept in across files. */
    --color-accent-bg-soft: rgba(59, 130, 246, 0.12);
    --color-border-acrylic: rgba(255, 255, 255, 0.08);

    /* Typography */
    --font-sans: "Google Sans Flex", sans-serif;
    --font-mono: "Noto Sans Mono", monospace;
    --font-icon: "Material Symbols Outlined";

    /* Type scale — mobile-first. Sizes are tuned for a phone with a
       retina display, where pixels are physically tiny; do not use
       desktop-style 12-14px values for production text. */
    --text-xs: 14px;
    --text-sm: 16px;
    --text-base: 20px;
    --text-md: 22px;
    --text-lg: 24px;
    --text-xl: 32px;
    --text-2xl: 40px;
    --text-3xl: 48px;
    --text-4xl: 60px;

    /* Semantic aliases — prefer these in components so the scale
       can be retuned globally without touching every call site. */
    --text-label: var(--text-md);
    --text-body: var(--text-base);
    --text-heading: var(--text-lg);

    /* Spacing */
    --content-max-width: 1040px;
    --content-padding: 24px;

    /* ===== Table system =====
     * Five families: compact, relaxed, scoreboard, picks, markets.
     * Families live in tables.css; tokens live here so columns and
     * density retune globally without touching every selector.
     */

    /* Table column widths — semantic names, used by .picks and .markets.
       Anchored to mobile pixel sizes; consider a desktop override if columns
       feel wide at 1024px+. */
    --col-player: auto;
    --col-team: 64px;
    --col-line: 85px;
    --col-odds: 96px;
    --col-ev: 110px;
    --col-fd-open: 85px;
    --col-fd-last: 95px;
    --col-model: 105px;
    --col-best-ev: 200px;
    --col-zscore: 110px;

    /* Density: compact (many numbers, small space) vs relaxed (fewer cols,
       more breathing room). Scoreboard / picks / markets pick their own.
       Compact lives in horizontally-scrollable wrappers now, so the
       per-column squeeze that motivated tiny text is gone — sized for
       mobile-retina readability. */
    --table-compact-font-size: var(--text-lg);
    --table-compact-padding: 10px 14px;
    --table-relaxed-font-size: var(--text-xl);
    --table-relaxed-line-height: 54px;
    --table-relaxed-padding-right: 8px;

    /* ===== Scoreboard card spacing =====
     * Same mobile-first pattern as --text-* — names stable across
     * breakpoints, pixel values shrink ~30% at 1024px+ (matches the
     * font-scale ratio so chrome and type scale together). Used by
     * the .scoreboard-* family in tables.css. */
    --scoreboard-gap-card: 36px;          /* between cards in the list */
    --scoreboard-pad-list-y: 12px;        /* vertical padding around the list */
    --scoreboard-card-border: 2px;        /* outer border width (no scale) */

    --scoreboard-pad-header-top: 32px;
    --scoreboard-pad-header-bot: 28px;
    --scoreboard-pad-header-x: 24px;
    --scoreboard-gap-header: 20px;        /* teams block ↔ state badge */
    --scoreboard-gap-teams: 22px;         /* away row ↔ home row */
    --scoreboard-gap-team: 18px;          /* logo ↔ meta ↔ score */
    --scoreboard-gap-team-meta: 16px;     /* abbr ↔ name */

    --scoreboard-pad-row-y: 22px;
    --scoreboard-pad-row-x: 24px;
    --scoreboard-pad-thead-top: 18px;
    --scoreboard-pad-thead-bot: 12px;
    --scoreboard-gap-row-col: 14px;       /* grid column gap inside thead/row */
    --scoreboard-gap-name: 10px;          /* pitcher name ↔ actual K result */

    --scoreboard-pad-empty-y: 32px;
    --scoreboard-pad-empty-x: 24px;

    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);

    /* Radii */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 16px;
    --radius-pill: 999px;

    /* Acrylic blur — Jimmy's polish, applied to chrome surfaces.
       --blur-acrylic is the filter; --bg-acrylic is the translucent fill.
       Use together: backdrop-filter: var(--blur-acrylic);
                     background: var(--bg-acrylic); */
    --blur-acrylic: blur(20px) saturate(180%);
    --blur-acrylic-strong: blur(30px) saturate(200%);
    /* Light-mode fills are SLIGHTLY DARK rather than slightly white-on-white,
       otherwise the page-header banner is invisible against the white page bg.
       The blur still shows scrolling content beneath; the tint just gives it
       enough contrast to read as a separate surface. */
    --bg-acrylic: rgba(0, 0, 0, 0.06);
    --bg-acrylic-strong: rgba(0, 0, 0, 0.10);
}

/* Desktop type scale — same token names, smaller pixel values.
 * The default scale above is tuned for an iPhone-class retina display
 * where pixels are physically tiny. On a desktop monitor that same
 * 32px nav-link reads as enormous. Drop every scale token by roughly
 * a third to a half at 1024px+. Components don't change — only the
 * pixel a token resolves to changes. Foldables / weird tablets fall
 * on the mobile side and read large; not optimizing for them. */
@media (min-width: 1024px) {
    :root {
        --text-xs: 12px;
        --text-sm: 13px;
        --text-base: 15px;
        --text-md: 16px;
        --text-lg: 18px;
        --text-xl: 22px;
        --text-2xl: 28px;
        --text-3xl: 36px;
        --text-4xl: 48px;

        /* Scoreboard scales at ~0.7 to match the type-scale ratio. */
        --scoreboard-gap-card: 24px;
        --scoreboard-pad-list-y: 8px;

        --scoreboard-pad-header-top: 22px;
        --scoreboard-pad-header-bot: 20px;
        --scoreboard-pad-header-x: 16px;
        --scoreboard-gap-header: 14px;
        --scoreboard-gap-teams: 16px;
        --scoreboard-gap-team: 12px;
        --scoreboard-gap-team-meta: 12px;

        --scoreboard-pad-row-y: 16px;
        --scoreboard-pad-row-x: 16px;
        --scoreboard-pad-thead-top: 12px;
        --scoreboard-pad-thead-bot: 8px;
        --scoreboard-gap-row-col: 10px;
        --scoreboard-gap-name: 8px;

        --scoreboard-pad-empty-y: 22px;
        --scoreboard-pad-empty-x: 16px;
    }
}

@media (prefers-color-scheme: dark) {
    :root:not(.light) {
        --color-text-primary: #ffffff;
        --color-text-secondary: #e5e7eb;
        --color-text-tertiary: #9ca3af;
        --color-text-dimmed: #6b7280;

        /* Deeper page bg, cards one notch lighter (Jimmy's dark-mode polish) */
        --color-bg-primary: #0b101a;
        --color-bg-secondary: #111827;
        --color-bg-tertiary: #374151;
        --color-bg-muted: #4b5563;

        --color-border: #374151;
        --color-border-light: #1f2937;
        --color-border-strong: #4b5563;

        --color-link: #60a5fa;
        --color-link-hover: #93c5fd;
        --color-accent: #3b82f6;

        --color-win-bg: rgba(34, 211, 153, 0.50);
        --color-win-bg-solid: #064e3b;
        --color-win-bg-solid-strong: #065f46;
        --color-lose-bg: rgba(248, 113, 113, 0.50);
        --color-lose-bg-solid: #7f1d1d;
        --color-lose-bg-solid-strong: #991b1b;

        --color-flash-bg: #1e3a5f;
        --color-flash-border: #60a5fa;

        --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
        --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4);
        --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4);

        --bg-acrylic: rgba(55, 65, 81, 0.55);
        --bg-acrylic-strong: rgba(17, 24, 39, 0.80);
    }
}

html.dark {
    --color-text-primary: #ffffff;
    --color-text-secondary: #e5e7eb;
    --color-text-tertiary: #9ca3af;
    --color-text-dimmed: #6b7280;

    --color-bg-primary: #0b101a;
    --color-bg-secondary: #111827;
    --color-bg-tertiary: #374151;
    --color-bg-muted: #4b5563;

    --color-border: #374151;
    --color-border-light: #1f2937;
    --color-border-strong: #4b5563;

    --color-link: #60a5fa;
    --color-link-hover: #93c5fd;
    --color-accent: #3b82f6;

    --color-win-bg: rgba(34, 211, 153, 0.50);
    --color-win-bg-solid: #064e3b;
    --color-win-bg-solid-strong: #065f46;
    --color-lose-bg: rgba(248, 113, 113, 0.50);
    --color-lose-bg-solid: #7f1d1d;
    --color-lose-bg-solid-strong: #991b1b;

    --color-flash-bg: #1e3a5f;
    --color-flash-border: #60a5fa;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4);

    --bg-acrylic: rgba(55, 65, 81, 0.55);
    --bg-acrylic-strong: rgba(17, 24, 39, 0.80);
}