/* ═══════════════════════════════════════════════════════════════════════ NFL SQUEEZE PLAY — THEME VARIABLES To create a new theme: duplicate :root block, add a [data-theme="name"] selector, and swap via or JS. ═══════════════════════════════════════════════════════════════════════ */ :root { /* ── Brand / Accent ──────────────────────────────────────────────── */ --color-accent: #1565c0; /* primary blue — links, active nav, scores */ --color-accent-dim: #1976d2; /* muted accent for borders */ --color-gold: #d4b84a; /* gold — current week col, both-sides caps */ --color-gold-dim: #c8a000; /* dim gold — uncommit button */ --color-danger: #e94560; /* red — sign out, locked pill, error */ --color-danger-dim: #c73652; /* red hover */ --color-success: #4caf50; /* green — commit btn, open pill, winner */ --color-success-dim: #2e7d32; /* green dim */ /* ── Backgrounds ─────────────────────────────────────────────────── */ --bg-page: #f0f4f8; /* outermost page bg */ --bg-surface: #ffffff; /* cards, nav, header */ --bg-surface-alt: #e8eef5; /* alternating card rows, even rows */ --bg-input: #dce6f0; /* inputs, selects, week-selector btns */ --bg-deep: #c8d8e8; /* status bar, deepest panels */ --bg-row-even: #f5f8fb; /* grid even rows */ --bg-row-odd: #e8eef5; /* grid odd rows (= surface-alt) */ /* ── Borders ─────────────────────────────────────────────────────── */ --border-subtle: #c0cfe0; /* dividers, cell borders */ --border-panel: #a0b8d0; /* card/nav/input borders */ /* ── Text ─────────────────────────────────────────────────────────── */ --text-primary: #1a1a2e; --text-secondary: #444; --text-muted: #666; --text-faint: #888; --text-very-faint: #aaa; --text-white: #1a1a2e; /* ── Pick states (my picks on schedule grid) ─────────────────────── */ --pick-bg: #2d3f5a; /* future pick — not yet result */ --pick-text: #b0c4de; --pick-active-bg: #2a4a6a; /* current week picked (no result yet) */ --pick-active-text: #a8d0e0; /* ── Results ─────────────────────────────────────────────────────── */ --win-bg: #2d5a3d; --win-text: #a8d8b0; --win-bg-dark: #0a2a0a; /* deep win (used in schedule) */ --win-text-bright: #3a7a50; --loss-bg: #5a2d2d; --loss-text: #d8a8a8; --loss-bg-dark: #2a0a0a; /* deep loss */ --loss-text-bright: #7a3a3a; /* ── Doubles (cyan) ──────────────────────────────────────────────── */ --double-color: #00e5ff; /* cyan — double pick outline & text */ --double-color-dim: #0099aa; /* faded cyan — past doubles */ --double-bg: #001a1f; /* double pick button bg */ --double-bg-dim: #001215; /* ── Conflict / Warning ──────────────────────────────────────────── */ --conflict-color: #ff8c00; /* orange — duplicate pick in section */ --conflict-bg: #3a1a00; --warn-color: #ffb300; /* amber warnings */ /* ── Used-in-section (unavailable teams) ────────────────────────── */ --used-bg: #555555; /* used-in-section — light grey */ --used-text: #888; /* ── Picker pills (matchups) ─────────────────────────────────────── */ --pill-bg: #0f3460; /* default picker pill bg */ --pill-win-bg: #2d5a3d; --pill-win-text: #a8d8b0; --pill-loss-bg: #5a2d2d; --pill-loss-text: #d8a8a8; /* ── Misc ────────────────────────────────────────────────────────── */ --live-color: #a8d0e0; /* live game text */ --bye-text: #555; --radius-card: 12px; --radius-btn: 8px; } /* ── Example alternate theme (uncomment + set data-theme="light" to test) [data-theme="light"] { --bg-page: #f0f4f8; --bg-surface: #ffffff; --bg-surface-alt: #e8eef5; --bg-input: #dce6f0; --bg-deep: #c8d8e8; --text-primary: #1a1a2e; --text-secondary: #444; --text-muted: #666; --border-subtle: #c0cfe0; --border-panel: #a0b8d0; } */