/* ============================================================ WhosBest.org — design tokens (Part C / B3) ------------------------------------------------------------ Purpose: a NEW token layer that can be adopted incrementally. Every name is prefixed `--wb-` so it cannot collide with the legacy tokens in app.css (--bg, --surface, --brand, ...). Migration intent: 1. Link this file BEFORE app.css (App.razor). 2. New components (/check rebuild, B3) use only --wb-* tokens. 3. Legacy pages migrate page-by-page: re-point the old app.css token to its --wb- equivalent (see docs/design/CHECK_REDESIGN_NOTES.md for the mapping table), then delete the old token. 4. When app.css :root is empty of colour/shadow tokens, remove --bg-bloom, --shadow-glow, --shadow-hover, --brand-glow and all gradient rules. Theme switching (until Part C rolls the tokens out site-wide): - No `color-scheme` is set on :root — legacy pages keep their own native-control rendering. Token adopters opt in per root (`.wb-check { color-scheme: dark }` in check.css). - The light palette applies ONLY when the document opts in with ``. The OS preference is honoured only when the document says `data-theme="auto"`; plain prefers-color-scheme is deliberately NOT enough, so a light-OS visitor does not get a white /check inside the still-dark legacy chrome. Rules of the system: - One accent (magenta). Use it for links, focus, primary action, active tab/nav. Never as a surface wash, gradient, or glow. - Semantic colours are reserved for status (pass/warn/fail/info). - No box-shadow glows. Depth = surface step + hairline border. - Monospace for IDs, scores, URLs, headers, code. ============================================================ */ :root { /* ---- Surfaces (dark default) ---- */ --wb-bg: #0B0D12; /* page */ --wb-surface-1: #11141B; /* card */ --wb-surface-2: #171B24; /* nested card / row hover / chips */ --wb-surface-3: #1E2330; /* active row / code blocks */ --wb-overlay: rgba(0, 0, 0, 0.6); /* ---- Borders (hairline) ---- */ --wb-border: rgba(255, 255, 255, 0.08); --wb-border-strong: rgba(255, 255, 255, 0.16); --wb-divider: rgba(255, 255, 255, 0.06); /* ---- Text ---- */ --wb-text-strong: #F5F7FA; --wb-text: #D4D8E0; --wb-text-muted: #8B93A3; --wb-text-dim: #5C6473; --wb-text-on-accent: #FFFFFF; /* ---- Accent (WhosBest magenta — sparingly) ---- */ --wb-accent: #E0387A; --wb-accent-hover: #F0599A; --wb-accent-subtle: rgba(224, 56, 122, 0.12); --wb-accent-border: rgba(224, 56, 122, 0.35); /* ---- Semantic ---- */ --wb-pass: #22C55E; --wb-pass-subtle: rgba(34, 197, 94, 0.12); --wb-warn: #F59E0B; --wb-warn-subtle: rgba(245, 158, 11, 0.12); --wb-fail: #EF4444; --wb-fail-subtle: rgba(239, 68, 68, 0.12); --wb-info: #60A5FA; --wb-info-subtle: rgba(96, 165, 250, 0.12); --wb-neutral: #8B93A3; /* n/a, unreliable, skipped */ --wb-neutral-subtle: rgba(139, 147, 163, 0.12); /* ---- Score bands (map from semantic; do not invent new hues) ---- */ --wb-band-excellent: var(--wb-pass); --wb-band-good: #84CC16; --wb-band-fair: var(--wb-warn); --wb-band-poor: var(--wb-fail); /* ---- Typography ---- */ --wb-font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --wb-font-mono: "JetBrains Mono", "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; --wb-text-xs: 0.75rem; /* 12 — chips, meta */ --wb-text-sm: 0.8125rem; /* 13 — table rows, labels */ --wb-text-md: 0.875rem; /* 14 — body on tool pages */ --wb-text-lg: 1rem; /* 16 — body on editorial pages */ --wb-text-xl: 1.25rem; /* 20 — section titles */ --wb-text-2xl: 1.5rem; /* 24 — page title */ --wb-text-3xl: 2rem; /* 32 — hero */ --wb-text-num: 2.5rem; /* 40 — score numerals */ --wb-text-num-lg: 3.5rem; /* 56 — primary score numeral */ --wb-leading-tight: 1.2; --wb-leading-normal: 1.5; --wb-leading-relaxed: 1.65; --wb-weight-normal: 400; --wb-weight-medium: 500; --wb-weight-semibold: 600; --wb-tracking-tight: -0.02em; --wb-tracking-caps: 0.06em; /* ---- Radii ---- */ --wb-radius-sm: 6px; --wb-radius-md: 8px; --wb-radius-lg: 10px; --wb-radius-pill: 999px; /* ---- Spacing (4px base) ---- */ --wb-space-1: 0.25rem; --wb-space-2: 0.5rem; --wb-space-3: 0.75rem; --wb-space-4: 1rem; --wb-space-5: 1.5rem; --wb-space-6: 2rem; --wb-space-7: 3rem; --wb-space-8: 4rem; /* ---- Layout ---- */ --wb-container: 1120px; --wb-container-narrow: 760px; --wb-row-h: 2.5rem; /* dense check-row height */ /* ---- Elevation (no glows) ---- */ --wb-shadow-none: none; --wb-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3); --wb-shadow-popover: 0 8px 24px rgba(0, 0, 0, 0.45); /* ---- Focus ring ---- */ --wb-focus-ring: 0 0 0 2px var(--wb-bg), 0 0 0 4px var(--wb-accent); --wb-focus-outline: 2px solid var(--wb-accent); /* ---- Motion ---- */ --wb-ease: cubic-bezier(0.2, 0, 0, 1); --wb-dur-fast: 120ms; --wb-dur: 180ms; } /* ------------------------------------------------------------ Light theme — explicit opt-in (`data-theme="light"`), or OS preference when the document says `data-theme="auto"`. Only colour tokens change; geometry/type stay identical. ------------------------------------------------------------ */ @media (prefers-color-scheme: light) { :root[data-theme="auto"] { --wb-bg: #FFFFFF; --wb-surface-1: #FAFAFB; --wb-surface-2: #F3F4F6; --wb-surface-3: #E9EBEF; --wb-overlay: rgba(17, 20, 27, 0.45); --wb-border: rgba(17, 20, 27, 0.10); --wb-border-strong: rgba(17, 20, 27, 0.20); --wb-divider: rgba(17, 20, 27, 0.07); --wb-text-strong: #0B0D12; --wb-text: #1F2430; --wb-text-muted: #5C6473; --wb-text-dim: #8B93A3; --wb-accent: #C62A67; /* slightly darker for AA on white */ --wb-accent-hover: #E0387A; --wb-accent-subtle: rgba(198, 42, 103, 0.10); --wb-accent-border: rgba(198, 42, 103, 0.35); --wb-pass: #15803D; --wb-pass-subtle: rgba(21, 128, 61, 0.10); --wb-warn: #B45309; --wb-warn-subtle: rgba(180, 83, 9, 0.10); --wb-fail: #B91C1C; --wb-fail-subtle: rgba(185, 28, 28, 0.10); --wb-info: #1D4ED8; --wb-info-subtle: rgba(29, 78, 216, 0.10); --wb-neutral: #6B7280; --wb-neutral-subtle: rgba(107, 114, 128, 0.10); --wb-band-good: #4D7C0F; --wb-shadow-sm: 0 1px 2px rgba(17, 20, 27, 0.08); --wb-shadow-popover: 0 8px 24px rgba(17, 20, 27, 0.14); } } :root[data-theme="light"] { --wb-bg: #FFFFFF; --wb-surface-1: #FAFAFB; --wb-surface-2: #F3F4F6; --wb-surface-3: #E9EBEF; --wb-overlay: rgba(17, 20, 27, 0.45); --wb-border: rgba(17, 20, 27, 0.10); --wb-border-strong: rgba(17, 20, 27, 0.20); --wb-divider: rgba(17, 20, 27, 0.07); --wb-text-strong: #0B0D12; --wb-text: #1F2430; --wb-text-muted: #5C6473; --wb-text-dim: #8B93A3; --wb-accent: #C62A67; --wb-accent-hover: #E0387A; --wb-accent-subtle: rgba(198, 42, 103, 0.10); --wb-accent-border: rgba(198, 42, 103, 0.35); --wb-pass: #15803D; --wb-pass-subtle: rgba(21, 128, 61, 0.10); --wb-warn: #B45309; --wb-warn-subtle: rgba(180, 83, 9, 0.10); --wb-fail: #B91C1C; --wb-fail-subtle: rgba(185, 28, 28, 0.10); --wb-info: #1D4ED8; --wb-info-subtle: rgba(29, 78, 216, 0.10); --wb-neutral: #6B7280; --wb-neutral-subtle: rgba(107, 114, 128, 0.10); --wb-band-good: #4D7C0F; --wb-shadow-sm: 0 1px 2px rgba(17, 20, 27, 0.08); --wb-shadow-popover: 0 8px 24px rgba(17, 20, 27, 0.14); } /* Reduced motion: honour it globally for anything using the tokens. */ @media (prefers-reduced-motion: reduce) { :root { --wb-dur-fast: 0ms; --wb-dur: 0ms; } }