/* ============================================================ tokens.css — single source of truth for Baby Match's app pages (index / swipe / tournament / duel / ranking). Per-page theming is one knob: put accent-pink | accent-gold | accent-violet on . Everything else — primary colour, ghost/pill tints, body gradient, shadow — derives from --accent*. The legal/doc pages (privacy/terms/pricing/delete-account) use a separate document style and intentionally do NOT load this file. ============================================================ */ :root { color-scheme: light; /* fixed palette (used regardless of the page accent) */ --pink: #ff6b8b; --pink-dark: #e84d6f; --pink-soft: #ffd9e2; --pink-tint: #fff5f8; --pink-grad: #fff0f4; --pink-rgb: 232,77,111; --gold: #f6b73c; --gold-dark: #d99a1b; --gold-soft: #ffe1a8; --gold-tint: #fffaf0; --gold-grad: #fff7e8; --gold-rgb: 246,183,60; --violet: #8a7bf4; --violet-dark: #5b49d6; --violet-soft: #ddd6ff; --violet-tint: #f6f3ff; --violet-grad: #f3f0ff; --violet-rgb: 138,123,244; --mint: #4dd6b8; --mint-dark: #2bbd9c; --mint-text: #157a63; /* mint used as TEXT (WCAG AA on the mint tag/tint surfaces) */ --on-accent: #241b20; /* text on any accent/mint FILL — passes on all accents, both themes */ --ink: #3a2e33; --grey: #7c7077; /* muted text — darkened from #9b8e93 to clear WCAG AA (~4.6:1 on white) */ --cream: #fff7f2; --error: #c0392b; /* the one semantic error colour, tokenized */ --warn-bg: #fff3cd; --warn-border: #ffe08a; --warn-ink: #7a5d00; /* surfaces — tokenised so the night theme can repaint them in one place */ --card: #ffffff; /* opaque card face */ --card-2: rgba(255,255,255,0.65); /* translucent panel */ --page-bg: linear-gradient(160deg, var(--accent-grad) 0%, #fef6ef 60%, #eafaf5 100%); --toast-bg: #3a2e33; --toast-ink: #ffffff; --tag-adv-bg: #dff7ef; --tag-out-bg: #f3eaed; --rule: #e4d7db; /* type — Baloo 2 (warm rounded display) names the things you love; Nunito (friendly rounded sans) runs everything else. */ --font-display: 'Baloo 2', 'Trebuchet MS', system-ui, sans-serif; --font-body: 'Nunito', 'Segoe UI', system-ui, -apple-system, sans-serif; /* shadow scale */ --shadow-sm: 0 4px 12px rgba(0,0,0,0.05); --shadow-lg: 0 18px 50px rgba(0,0,0,0.25); /* default accent = pink (index / swipe / tournament) */ --accent: var(--pink); --accent-deep: var(--pink-dark); --accent-soft: var(--pink-soft); --accent-tint: var(--pink-tint); --accent-grad: var(--pink-grad); --accent-rgb: var(--pink-rgb); --accent-text: #bd2f52; /* accent used as TEXT — deep enough for WCAG AA on card/tint */ --winner-1: #c08a00; /* first stop of the champion-name gradient (day-safe gold) */ --winner-2: var(--pink); /* second stop of the champion-name gradient */ } :root, html.accent-pink { /* explicit pink (same as default) */ } html.accent-gold { --accent: var(--gold); --accent-deep: var(--gold-dark); --accent-soft: var(--gold-soft); --accent-tint: var(--gold-tint); --accent-grad: var(--gold-grad); --accent-rgb: var(--gold-rgb); --accent-text: #8a6100; --winner-2: var(--pink); } html.accent-violet { --accent: var(--violet); --accent-deep: var(--violet-dark); --accent-soft: var(--violet-soft); --accent-tint: var(--violet-tint); --accent-grad: var(--violet-grad); --accent-rgb: var(--violet-rgb); --accent-text: #5b49d6; --winner-2: var(--violet); } /* --shadow follows the accent (standardised at .18 alpha everywhere) */ :root { --shadow: 0 12px 30px rgba(var(--accent-rgb), 0.18); } /* ============================================================ NIGHT THEME (set by theme.js / the boot snippet). Selector specificity (0,1,1) matches the accent classes and is placed AFTER them, so it wins ties and repaints the accent-derived surface tokens. The per-page cards (defined as literal #fff in each page's