/* ============================================================= Illustrated Stats — Design Token System isl-tokens.css · Load BEFORE site.css and all other sheets HOW THEMES WORK ─────────────── All colors are CSS custom properties defined here. The active theme is controlled by a [data-theme] attribute on . Toggle with one JS line: document.documentElement.setAttribute('data-theme','light') Views should reference tokens, never raw hex values: background: var(--isl-surface-1) ✓ background: #0e0e0e ✗ TOKEN NAMING CONVENTION ─────────────────────── --isl-[-] Role: bg | surface | border | text | accent | status | overlay Variant: 1/2/3 (lightness steps), -em (emphasis), -dim (muted) ============================================================= */ /* ───────────────────────────────────────────────────────────── DARK THEME (default — matches current app) ───────────────────────────────────────────────────────────── */ :root, [data-theme="dark"] { /* ── Page backgrounds ──────────────────────────────────── */ --isl-bg-page: #080814; /* html/body base */ --isl-bg-deep: #0a0a10; /* secondary page bg */ --isl-bg-nav: rgba(8,8,20,0.88); /* fixed nav bar */ --isl-bg-nav-mobile: rgba(8,8,20,0.98); /* nav bar on mobile */ --isl-bg-drawer: rgba(6,6,16,0.97); /* mobile full-screen drawer */ /* ── Surface hierarchy (cards, panels, modals) ─────────── */ --isl-surface-1: #0e0e0e; /* primary card / modal bg */ --isl-surface-2: #111214; /* slightly lifted surface */ --isl-surface-3: #181a21; /* topbar, dropdown bg */ --isl-surface-4: rgba(255,255,255,0.04); /* subtle raised row */ --isl-surface-5: rgba(255,255,255,0.025); /* menu item resting */ --isl-surface-hover: rgba(255,255,255,0.06); /* hover state */ --isl-surface-active: rgba(255,255,255,0.1); /* pressed / selected */ /* ── Borders ───────────────────────────────────────────── */ --isl-border-1: rgba(255,255,255,0.07); /* default card edge */ --isl-border-2: rgba(255,255,255,0.10); /* slightly visible */ --isl-border-3: rgba(255,255,255,0.16); /* prominent edge */ /* ── Orange accent — primary brand color ───────────────── */ --isl-accent: #ff8c00; /* primary orange */ --isl-accent-em: #ffaa00; /* emphasized (labels, values) */ --isl-accent-dim: rgba(255,140,0,0.55); /* muted / secondary */ --isl-accent-bg: rgba(255,140,0,0.10); /* tinted surface */ --isl-accent-bg-hover: rgba(255,140,0,0.18); /* hovered tinted surface */ --isl-accent-border: rgba(255,140,0,0.28); /* accent-tinted border */ --isl-accent-border-em: rgba(255,140,0,0.45); /* stronger accent border */ /* ── Orange gradient — title / hero elements ───────────── */ --isl-gradient-title: linear-gradient(135deg, #ffe066 0%, #ffaa00 25%, #ff6600 55%, #ff9900 80%, #ffcc44 100%); --isl-gradient-accent: linear-gradient(135deg, #ff6600, #ffaa00); --isl-gradient-btn: linear-gradient(135deg, #ff7b00, #ffb326); /* ── Text ──────────────────────────────────────────────── */ --isl-text-primary: #f0f4ff; /* main body text */ --isl-text-secondary: #ccc; /* supporting text */ --isl-text-muted: #888; /* placeholder, meta */ --isl-text-dim: #555; /* very quiet — labels, dividers */ --isl-text-accent: #ffaa44; /* orange text on dark */ --isl-text-accent-em: #ffcc44; /* bright orange text */ --isl-text-on-accent: #1b0d00; /* text on orange button */ /* ── Status colors ─────────────────────────────────────── */ --isl-status-live: #22c55e; /* live / in-progress green */ --isl-status-live-dim: rgba(34,197,94,0.18); --isl-status-live-border: rgba(34,197,94,0.35); --isl-status-win: #4caf50; --isl-status-win-dim: rgba(76,175,80,0.18); --isl-status-win-border: rgba(76,175,80,0.35); --isl-status-win-glow: rgba(76,175,80,0.20); --isl-status-win-text: #4caf50; --isl-status-loss: #ef5350; --isl-status-loss-dim: rgba(239,83,80,0.18); --isl-status-loss-text: #ef5350; /* warn = amber — used for season-complete, archive, csm modals */ --isl-status-warn: #ffca28; --isl-status-warn-em: #fcd34d; --isl-status-warn-dim: rgba(245,158,11,0.14); --isl-status-warn-border: rgba(245,158,11,0.30); --isl-status-warn-glow: rgba(245,158,11,0.18); --isl-status-warning: #ffc107; --isl-status-warning-dim: rgba(255,193,7,0.16); --isl-status-warning-border: rgba(255,193,7,0.34); --isl-status-warning-text: #ffca28; --isl-status-info: #60a5fa; --isl-status-info-em: #93c5fd; --isl-status-info-dim: rgba(96,165,250,0.14); --isl-status-info-border: rgba(96,165,250,0.30); --isl-status-info-glow: rgba(96,165,250,0.18); --isl-status-danger: #f87171; --isl-status-danger-em: #fca5a5; --isl-status-danger-dim: rgba(220,38,38,0.14); --isl-status-danger-border: rgba(220,38,38,0.35); --isl-status-danger-glow: rgba(220,38,38,0.20); --isl-status-purple: #b89ff8; --isl-status-purple-em: #c4b5fd; --isl-status-purple-dim: rgba(168,85,247,0.14); --isl-status-purple-border: rgba(168,85,247,0.28); --isl-status-purple-glow: rgba(168,85,247,0.18); /* ── Accent glow / gloss helpers ──────────────────────── */ --isl-accent-glow: rgba(255,102,0,0.30); --isl-accent-bg-em: rgba(255,140,0,0.18); /* stronger tinted surface */ --isl-gloss-highlight: rgba(255,255,255,0.06); /* inset top shine */ /* ── Disabled text ────────────────────────────────────── */ --isl-text-disabled: #444; /* inactive labels, placeholder-level */ /* ── Overlay / backdrop ────────────────────────────────── */ --isl-overlay: rgba(0,0,0,0.82); --isl-overlay-light: rgba(0,0,0,0.55); --isl-backdrop-blur: blur(12px); /* ── Shadows ───────────────────────────────────────────── */ --isl-shadow-card: 0 20px 60px rgba(0,0,0,0.55); --isl-shadow-card-sm: 0 8px 30px rgba(0,0,0,0.35); --isl-shadow-modal: 0 24px 60px rgba(0,0,0,0.60); --isl-shadow-menu: 0 18px 48px rgba(0,0,0,0.85); --isl-shadow-accent: 0 14px 32px rgba(255,102,0,0.34); --isl-shadow-btn: 0 4px 14px rgba(255,100,0,0.38); /* ── Border radii ──────────────────────────────────────── */ --isl-radius-sm: 8px; --isl-radius-md: 12px; --isl-radius-lg: 16px; --isl-radius-xl: 24px; --isl-radius-pill: 999px; /* ── Stat tile accent colors ───────────────────────────── */ --isl-tile-pts: #ffaa00; --isl-tile-reb: #4caf50; --isl-tile-ast: #17d4f5; --isl-tile-stl: #b89ff8; --isl-tile-blk: #ef5350; --isl-tile-to: #ef5350; --isl-tile-foul: #ffc107; --isl-tile-fg: #ffcc44; /* Shooting makes & misses */ --isl-tile-2m: #ff7b00; --isl-tile-3m: #ffd600; --isl-tile-ftm: #00e5ff; --isl-tile-2x: #a04020; /* muted burnt orange */ --isl-tile-3x: #a08800; /* muted gold */ --isl-tile-ftx: #007a8a; /* muted cyan */ /* ── Theme identity ────────────────────────────────────── */ --isl-theme-name: "dark"; color-scheme: dark; } /* ───────────────────────────────────────────────────────────── LIGHT THEME (scaffolded — ready for Phase 5 polish) ───────────────────────────────────────────────────────────── */ [data-theme="light"] { /* ── Page backgrounds ──────────────────────────────────── */ --isl-bg-page: #f5f5f7; --isl-bg-deep: #ebebed; --isl-bg-nav: rgba(255,255,255,0.88); --isl-bg-nav-mobile: rgba(255,255,255,0.98); --isl-bg-drawer: rgba(248,248,250,0.97); /* ── Surface hierarchy ─────────────────────────────────── */ --isl-surface-1: #ffffff; --isl-surface-2: #f8f8fa; --isl-surface-3: #eeeef2; --isl-surface-4: rgba(0,0,0,0.03); --isl-surface-5: rgba(0,0,0,0.025); --isl-surface-hover: rgba(0,0,0,0.05); --isl-surface-active: rgba(0,0,0,0.09); /* ── Borders ───────────────────────────────────────────── */ --isl-border-1: rgba(0,0,0,0.08); --isl-border-2: rgba(0,0,0,0.12); --isl-border-3: rgba(0,0,0,0.18); /* ── Orange accent — same brand, lighter context ────────── */ --isl-accent: #e07000; --isl-accent-em: #c05800; --isl-accent-dim: rgba(200,100,0,0.5); --isl-accent-bg: rgba(200,100,0,0.08); --isl-accent-bg-hover: rgba(200,100,0,0.14); --isl-accent-border: rgba(200,100,0,0.25); --isl-accent-border-em: rgba(200,100,0,0.40); /* ── Orange gradient ───────────────────────────────────── */ --isl-gradient-title: linear-gradient(135deg, #d46000 0%, #e07800 40%, #c05000 100%); --isl-gradient-accent: linear-gradient(135deg, #e06000, #f09000); --isl-gradient-btn: linear-gradient(135deg, #e07000, #f0a000); /* ── Text ──────────────────────────────────────────────── */ --isl-text-primary: #1a1a2e; --isl-text-secondary: #444; --isl-text-muted: #666; --isl-text-dim: #999; --isl-text-accent: #c06000; --isl-text-accent-em: #a04800; --isl-text-on-accent: #fff; /* ── Status colors — same hues, light context ──────────── */ --isl-status-live: #16a34a; --isl-status-live-dim: rgba(22,163,74,0.12); --isl-status-live-border: rgba(22,163,74,0.3); --isl-status-win: #166534; --isl-status-win-dim: rgba(22,101,52,0.16); --isl-status-win-border: rgba(22,101,52,0.34); --isl-status-win-glow: rgba(22,101,52,0.18); --isl-status-win-text: #166534; --isl-status-loss: #dc2626; --isl-status-loss-dim: rgba(220,38,38,0.12); --isl-status-loss-text: #dc2626; /* warn = amber */ --isl-status-warn: #d97706; --isl-status-warn-em: #92400e; --isl-status-warn-dim: rgba(217,119,6,0.12); --isl-status-warn-border: rgba(217,119,6,0.28); --isl-status-warn-glow: rgba(217,119,6,0.14); --isl-status-warning: #d97706; --isl-status-warning-dim: rgba(217,119,6,0.12); --isl-status-warning-border: rgba(217,119,6,0.3); --isl-status-warning-text: #92400e; --isl-status-info: #0284c7; --isl-status-info-em: #0369a1; --isl-status-info-dim: rgba(2,132,199,0.12); --isl-status-info-border: rgba(2,132,199,0.28); --isl-status-info-glow: rgba(2,132,199,0.14); --isl-status-danger: #dc2626; --isl-status-danger-em: #b91c1c; --isl-status-danger-dim: rgba(220,38,38,0.10); --isl-status-danger-border: rgba(220,38,38,0.28); --isl-status-danger-glow: rgba(220,38,38,0.14); --isl-status-purple: #7c3aed; --isl-status-purple-em: #6d28d9; --isl-status-purple-dim: rgba(124,58,237,0.10); --isl-status-purple-border: rgba(124,58,237,0.25); --isl-status-purple-glow: rgba(124,58,237,0.14); /* ── Accent glow / gloss helpers ──────────────────────── */ --isl-accent-glow: rgba(200,100,0,0.22); --isl-accent-bg-em: rgba(200,100,0,0.14); --isl-gloss-highlight: rgba(0,0,0,0.04); /* ── Disabled text ────────────────────────────────────── */ --isl-text-disabled: #aaa; /* ── Overlay / backdrop ────────────────────────────────── */ --isl-overlay: rgba(0,0,0,0.55); --isl-overlay-light: rgba(0,0,0,0.30); --isl-backdrop-blur: blur(12px); /* ── Shadows ───────────────────────────────────────────── */ --isl-shadow-card: 0 8px 32px rgba(0,0,0,0.12); --isl-shadow-card-sm: 0 4px 16px rgba(0,0,0,0.08); --isl-shadow-modal: 0 16px 48px rgba(0,0,0,0.18); --isl-shadow-menu: 0 8px 32px rgba(0,0,0,0.16); --isl-shadow-accent: 0 8px 20px rgba(200,100,0,0.22); --isl-shadow-btn: 0 4px 12px rgba(200,100,0,0.28); /* ── Border radii — same in both themes ────────────────── */ --isl-radius-sm: 8px; --isl-radius-md: 12px; --isl-radius-lg: 16px; --isl-radius-xl: 24px; --isl-radius-pill: 999px; /* ── Stat tile accent colors ───────────────────────────── */ --isl-tile-pts: #c07000; --isl-tile-reb: #15803d; --isl-tile-ast: #0284c7; --isl-tile-stl: #7c3aed; --isl-tile-blk: #dc2626; --isl-tile-to: #dc2626; --isl-tile-foul: #d97706; --isl-tile-fg: #b45309; /* Shooting makes & misses */ --isl-tile-2m: #c45200; --isl-tile-3m: #a07800; --isl-tile-ftm: #0369a1; --isl-tile-2x: #7a3000; --isl-tile-3x: #6b5800; --isl-tile-ftx: #0e5f6e; /* ── Theme identity ────────────────────────────────────── */ --isl-theme-name: "light"; color-scheme: light; }