/** * BoardGameBot — Design Tokens * Dark theme is default. Light theme via .theme-light on . * Font: Inter (body + headlines), fallback system-ui. */ :root { /* Backgrounds */ --bg: #07070b; --bg-2: #0d0d14; /* Surfaces */ --surface: #14141d; --surface-2: #1a1a26; --surface-3: #20202e; /* Borders */ --border: rgba(255, 255, 255, 0.07); --border-2: rgba(255, 255, 255, 0.12); /* Text */ --text: #f4f4f8; --text-muted: #a4a4b3; --text-dim: #6f6f80; /* Primary (indigo) */ --primary: #7c7ff7; --primary-hover: #8d90ff; --primary-soft: rgba(124, 127, 247, 0.12); --primary-border: rgba(124, 127, 247, 0.35); /* Semantic */ --premium: #ec4f9c; --premium-soft: rgba(236, 79, 156, 0.14); --success: #4ade80; --success-soft: rgba(74, 222, 128, 0.10); --success-border: rgba(74, 222, 128, 0.25); --warn: #fbbf24; --error: #ff6e84; --rec: #6dbe57; --best: #2fa172; /* Primary button text (dark on bright indigo) */ --primary-btn-text: #0c0c14; /* Typography */ --font-body: "Inter", system-ui, -apple-system, sans-serif; --font-headline: "Inter", system-ui, -apple-system, sans-serif; /* Radii */ --radius-sm: 8px; --radius-md: 10px; --radius-lg: 12px; --radius-xl: 14px; --radius-pill: 999px; /* Layout */ --top-bar-h: 4rem; --bottom-nav-h: 5rem; --main-max: 28rem; --v-stack: 1.25rem; /* Elevation */ --shadow-card: 0 20px 40px rgba(0, 0, 0, 0.25); --shadow-bar: 0 8px 32px rgba(124, 127, 247, 0.15); --shadow-nav: 0 -4px 24px rgba(0, 0, 0, 0.5); --shadow-btn-primary: 0 8px 24px rgba(124, 127, 247, 0.3); /* ---- Legacy aliases (bridge old --ds-* refs) ---- */ --ds-cta: var(--primary); --ds-cta-glow: var(--primary-soft); --ds-cta-shadow: rgba(124, 127, 247, 0.3); --ds-cta-soft: rgba(124, 127, 247, 0.05); --ds-background: var(--bg); --ds-surface: var(--surface); --ds-surface-dim: var(--bg); --ds-surface-container-low: var(--bg-2); --ds-surface-container: var(--surface); --ds-surface-container-high: var(--surface-2); --ds-surface-container-highest: var(--surface-3); --ds-surface-bright: var(--surface-3); --ds-surface-variant: var(--surface-3); --ds-on-surface: var(--text); --ds-on-surface-variant: var(--text-muted); --ds-on-background: var(--text); --ds-outline: var(--text-dim); --ds-outline-variant: var(--border-2); --ds-primary: var(--primary); --ds-primary-dim: var(--primary-hover); --ds-on-primary: var(--primary-btn-text); --ds-error: var(--error); --ds-on-error: #490013; --ds-font-headline: var(--font-headline); --ds-font-body: var(--font-body); --ds-font-label: var(--font-body); --ds-radius-sm: var(--radius-sm); --ds-radius-md: var(--radius-md); --ds-radius-lg: var(--radius-lg); --ds-radius-xl: var(--radius-xl); --ds-radius-pill: var(--radius-pill); --ds-top-bar-h: var(--top-bar-h); --ds-bottom-nav-h: var(--bottom-nav-h); --ds-main-max: var(--main-max); --ds-v-stack: var(--v-stack); --ds-space-section: var(--v-stack); --ds-shadow-bar: var(--shadow-bar); --ds-shadow-nav: var(--shadow-nav); --ds-shadow-btn-primary: var(--shadow-btn-primary); } /* Light theme */ .theme-light { --bg: #f4f4f7; --bg-2: #eeeef2; --surface: #ffffff; --surface-2: #f7f7fa; --surface-3: #eef0f4; --border: rgba(15, 15, 30, 0.08); --border-2: rgba(15, 15, 30, 0.14); --text: #0d0d18; --text-muted: #5a5a6e; --text-dim: #8a8a9c; --primary: #5b5ef0; --primary-hover: #4a4ddf; --primary-soft: rgba(91, 94, 240, 0.08); --primary-border: rgba(91, 94, 240, 0.30); --premium: #d63d8a; --success: #16a34a; --warn: #d97706; --error: #dc2626; --primary-btn-text: #ffffff; --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.08); --shadow-bar: 0 2px 12px rgba(0, 0, 0, 0.06); --shadow-nav: 0 -2px 12px rgba(0, 0, 0, 0.06); --shadow-btn-primary: 0 4px 16px rgba(91, 94, 240, 0.25); /* Legacy aliases must be re-set so they pick up light values */ --ds-cta: var(--primary); --ds-cta-glow: var(--primary-soft); --ds-cta-shadow: rgba(91, 94, 240, 0.25); --ds-cta-soft: rgba(91, 94, 240, 0.05); --ds-background: var(--bg); --ds-surface: var(--surface); --ds-surface-dim: var(--bg); --ds-surface-container-low: var(--bg-2); --ds-surface-container: var(--surface); --ds-surface-container-high: var(--surface-2); --ds-surface-container-highest: var(--surface-3); --ds-surface-bright: var(--surface-3); --ds-surface-variant: var(--surface-3); --ds-on-surface: var(--text); --ds-on-surface-variant: var(--text-muted); --ds-on-background: var(--text); --ds-outline: var(--text-dim); --ds-outline-variant: var(--border-2); --ds-primary: var(--primary); --ds-primary-dim: var(--primary-hover); --ds-on-primary: var(--primary-btn-text); --ds-error: var(--error); --ds-on-error: #fce4ec; --ds-shadow-bar: var(--shadow-bar); --ds-shadow-nav: var(--shadow-nav); --ds-shadow-btn-primary: var(--shadow-btn-primary); } /* Header + bottom nav are ALWAYS dark, regardless of theme */ .top-app-bar, .bottom-nav, .site-footer { --bg: #07070b; --surface: #14141d; --surface-2: #1a1a26; --surface-3: #20202e; --border: rgba(255, 255, 255, 0.07); --border-2: rgba(255, 255, 255, 0.12); --text: #f4f4f8; --text-muted: #a4a4b3; --text-dim: #6f6f80; --primary: #7c7ff7; --primary-hover: #8d90ff; --primary-soft: rgba(124, 127, 247, 0.12); --primary-border: rgba(124, 127, 247, 0.35); /* Override legacy aliases inside header/nav */ --ds-background: #07070b; --ds-surface-container-high: var(--surface-2); --ds-surface-container-low: var(--bg-2); --ds-on-surface: var(--text); --ds-on-surface-variant: var(--text-muted); --ds-primary: var(--primary); }