/* The brand faces must load wherever the type tokens are defined. This import previously lived only in editorial-signal.css, which the 52 generated collection/guide pages never load — so every one of them rendered in Inter instead of DM Sans. Declaring it here ties the faces to the tokens that name them. Browsers de-duplicate the identical request, so pages that also load editorial-signal.css fetch nothing extra. @import must precede all rules, so this stays at the top of the file. */ @import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Newsreader:ital,opsz,wght@0,6..72,500;1,6..72,500&display=swap"); /* ========================================================================== DropRadar — Design Tokens Generated 2026-08-15. Replaces 465 distinct color values with 30 tokens, plus spacing, radius and type scales. Loaded LAST on every public page (see CLAUDE.md) so it is the authoritative :root, and it aliases the legacy --dr-*, --signal-* and --home-* families onto the shared set. Every ratio in the comments is computed to WCAG 2.2 relative luminance against the surface the token actually sits on. ========================================================================== */ :root { /* --- surfaces ------------------------------------------------------- */ --canvas: #06070a; /* page ground */ --surface: #0e1015; /* cards, panels */ --raised: #171920; /* hover states, inputs, elevated wells */ /* --- text — ratios vs --surface ------------------------------------- */ --text-primary: #f6f2ff; /* 17.27:1 AA */ --text-secondary: rgba(246,242,255,.72); /* 9.19:1 AA */ --text-muted: rgba(246,242,255,.58); /* 6.29:1 AA */ --text-faint: rgba(246,242,255,.42); /* 3.82:1 AA LARGE ONLY */ /* --- borders -------------------------------------------------------- */ --border-subtle: rgba(255,255,255,.06); /* internal dividers */ --border-default: rgba(255,255,255,.10); /* cards, inputs */ --border-strong: rgba(255,255,255,.16); /* hover, active */ /* --- purple: the signature ------------------------------------------ --purple is 4.32:1 and FAILS AA for normal-size text. Use it for fills, borders, icons and countdown digits at 18px+. For purple text below 18px use --purple-light (6.81:1). */ --purple: #914fff; --purple-light: #b680ff; --purple-tint: #201936; /* badge fill; --purple-light on it = 6.00:1 */ --purple-edge: #382460; /* badge border */ /* --- status: semantic only, never decorative ------------------------ */ --green: #62e87a; /* verified 12.09:1 */ --green-light: #8ff0a1; --green-tint: #1a2e23; /* --green-light on it = 10.38:1 */ --green-edge: #295535; --amber: #ffad32; /* date pending 10.22:1 */ --amber-light: #ffc773; --amber-tint: #302619; /* --amber-light on it = 9.65:1 */ --amber-edge: #5b421e; --red: #ff5d69; /* held 6.36:1 */ --red-light: #ff8f97; --red-tint: #301b21; /* --red-light on it = 7.38:1 */ --red-edge: #5b2930; /* "out now" — the fourth state. The countdown switches to this the day a record lands; it is the most important moment on the site and must not look like an ordinary counting-down card. Chosen over teal because it sits 68 degrees from purple and 64 from green, evenly clear of both, where teal is only 42 degrees from green. */ --live: #62d8ff; /* out now 11.59:1 */ --live-light: #9ce6ff; /* 13.75:1 */ --live-tint: #1a2c36; /* --live-light on it = 10.41:1 */ --live-edge: #295060; /* --- elevation: two levels, no glow --------------------------------- */ --shadow-card: 0 1px 2px rgba(0,0,0,.4); --shadow-float: 0 12px 32px rgba(0,0,0,.55); --focus-ring: 0 0 0 2px var(--canvas), 0 0 0 4px var(--purple-light); /* --- spacing: 4px base ---------------------------------------------- Replaces ad-hoc values. Measured clusters were 4/8/12/16/20/24/32/ 40/48/64 with many one-offs between. */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; /* section rhythm — was a different clamp at nearly every section */ --gutter: clamp(18px, 3.2vw, 52px); --section: clamp(48px, 7vw, 96px); --container: 1460px; /* --- radius: 21 distinct values collapse to 5 ------------------------ */ --radius-sm: 6px; /* badges, chips, small controls (75 uses) */ --radius-md: 10px; /* buttons, inputs, small cards (157 uses) */ --radius-lg: 14px; /* cards, panels (113 uses) */ --radius-xl: 20px; /* large panels, modals (37 uses) */ --radius-pill: 999px; /* pills, avatars (91 uses) */ /* --- type: 74 distinct sizes collapse to 7 -------------------------- DM Sans carries every interface role. Newsreader is editorial headlines and major display headings ONLY — never controls, metadata, cards or navigation. */ --font-ui: "DM Sans", ui-sans-serif, system-ui, sans-serif; --font-editorial: "Newsreader", Georgia, serif; /* --sans / --serif were referenced 19 times across the stylesheets but never defined anywhere. 13 of those uses sit inside `font:` shorthands, e.g. `font: 750 clamp(2rem,3vw,2.8rem)/1.02 var(--sans)` — and a shorthand containing an invalid var() is dropped in full, taking the size, weight and line-height with it. That is why several headings fell back to the browser default 16px/400 despite having explicit rules. Aliased here. */ --sans: var(--font-ui); --serif: var(--font-editorial); --fs-label: 11px; /* uppercase eyebrows, countdown units (112 uses) */ --fs-caption: 12px; /* metadata, timestamps (171 uses) */ --fs-small: 13px; /* dense body, card subtitles (128 uses) */ --fs-body: 15px; /* default running text */ --fs-lead: 18px; /* card titles, lead paragraphs */ --fs-title: 24px; /* section headings */ --fs-display: clamp(30px, 4vw, 42px); /* page headings */ --lh-tight: 1.15; /* headings */ --lh-snug: 1.35; /* card titles, leads */ --lh-body: 1.6; /* running text */ --tracking-label: .11em; /* uppercase labels only */ /* Comfortable line length for running prose. Legal and info pages were setting 95 characters per line, well past the 45-75 range where reading speed holds up. Applies to prose only, never to cards or UI. Note the unit: 1ch is the width of "0", which is wide in DM Sans (~0.68em), so 68ch rendered ~93 actual characters. 50ch measures to ~70 characters of real prose, which is the intended target. */ --measure: 50ch; --weight-regular: 400; --weight-medium: 500; --weight-semi: 600; --weight-bold: 700; } /* Digits that update in place must not reflow their container. Applies to every countdown, stat and tabular figure on the site. */ .discovery-release-countdown strong, .artist-next-countdown strong, .calendar-day-countdown strong, .signal-radar-stats strong, time { font-variant-numeric: tabular-nums; } /* ========================================================================== MIGRATION ALIASES Point the old token families at the new set so existing rules keep working while components are migrated one at a time. Delete a line once every consumer of that variable has been converted. Verify with: grep -rn "var(--signal-purple)" *.css ========================================================================== */ :root { /* base family */ --bg: var(--canvas); --text: var(--text-primary); --muted: var(--text-muted); --line: var(--border-default); --line-strong: var(--purple-edge); --panel: var(--surface); --purple-2: var(--purple-light); --cyan: var(--purple-light); /* decorative use — REVIEW, see note */ --shadow: var(--shadow-float); /* signal family */ --signal-bg: var(--canvas); --signal-panel: var(--surface); --signal-panel-2: var(--raised); --signal-line: var(--border-default); --signal-text: var(--text-primary); --signal-muted: var(--text-muted); --signal-purple: var(--purple); --signal-cyan: var(--purple-light); /* decorative use — REVIEW, see note */ --signal-coral: var(--red); /* dr family */ --dr-bg: var(--canvas); --dr-bg-soft: var(--surface); --dr-elevated: var(--raised); --dr-text: var(--text-primary); --dr-secondary: var(--text-secondary); --dr-muted: var(--text-muted); --dr-line: var(--border-default); --dr-border-strong: var(--border-strong); --dr-surface-raised:var(--raised); --dr-purple: var(--purple); --dr-cyan: var(--live); /* release-day countdown — semantic */ --dr-focus: var(--purple-light); /* home family */ --home-line: var(--border-default); --home-line-purple: var(--purple-edge); --home-muted: var(--text-muted); --home-purple: var(--purple); --home-purple-soft: var(--purple-light); } /* -------------------------------------------------------------------------- NOTE ON THE COOL ACCENT — decided 2026-08-15 The old palette carried three incompatible cool accents: sky blue (#62d8ff, #77d1ff), teal (#40d8d0, #70e2d5, #9cf3e9) and a pale blue text tint (#d7f3ff). Sky and teal are 21 degrees apart in hue and read as an error when adjacent. Decision: retired as a general accent, retained as ONE semantic status colour, --live, for the "out now" state only. Sky #62d8ff was kept over teal on hue separation (68 deg from purple / 64 from green, vs teal's 42 from green). --dr-cyan already meant exactly this and is aliased straight through: discovery-rail.css:49 .artist-next-countdown.release-day-count strong discovery-rail.css:50 .calendar-day-countdown.release-day-count strong --cyan and --signal-cyan are NOT semantic. Their ~25 call sites mix three different jobs and need individual review during component migration: eyebrows / kickers -> --purple-light editorial-signal.css:423,425,841,943 dates and times -> --text-muted (a date is not a live state) editorial-signal.css:434,1055,1071 source links, focus -> --purple-light editorial-signal.css:439,771 Both are aliased to --purple-light meanwhile, which is safe but wrong for the date/time cases. Do not treat the alias as the finished migration. COLOUR-BLINDNESS NOTE --live and --green sit at near-identical luminance (1.04:1 between them). They are never the sole differentiator: the verified state is a pill with a text label, the live state is countdown digits. Keep it that way — do not build any control that distinguishes them by colour alone. DELETED AS UNUSED (confirmed zero var() references): --panel-strong, --pink, --soft, --home-bg, --home-panel, --home-panel-soft NOT A BUG — checked 2026-08-15: --ring-size appears 5 times with 5 values (52/46/88/78/58px) at styles.css:7103, 7410, 7421, 7424, 7945. This was initially flagged as a token collision. It is not. It is a component parameter for .release-progress-ring: a 52px base with per-context overrides, the last inside @media (max-width:760px). Consumed once, at styles.css:7391. Parameterising a component this way is correct; leave it alone. The distinction worth holding: a design token is global and constant (--purple is always --purple). A component parameter is deliberately overridden per instance. Both use custom properties; only the first belongs in this file. -------------------------------------------------------------------------- */