/* ========================================================================== GodSend — tokens.css: the design tokens, and nothing else -------------------------------------------------------------------------- The one home of the palette, the type scale, the spacing scale and the control sizes. Loaded by both document heads, after fonts.css: partials/head.ejs fonts.css → tokens.css → theme.css → admin.css → … partials/public-head.ejs fonts.css → tokens.css → public.css Nothing here is a rule: no selector but :root, no layout, no component. theme.css (base + shell) and public.css consume these and never redeclare one. A test pins that this file is ONE :root block — do not add a second selector or an @media here. THE PALETTE IS THE SHOW'S, READ OFF THE SHOW'S OWN SITE (2026-09-05). Until this date the product wore a neutral near-black console palette (#121212 grounds, a bright #ff424b) that had no relationship to anything the audience already recognised. godlessengineering.com's Divi theme publishes its five brand colours as custom properties, and those five are now these: #000000 the page → bg-0 #1f1f1f the alternating band → bg-1 #c23d3d the red: headings, buttons → red #ffffff running text → ink-1 #bfbfbf quiet text → ink-2 Everything else below is derived to sit between them, and every ratio in a comment was computed with the WCAG relative-luminance formula rather than estimated. Four grounds exist: bg-0 #000000 the page bg-1 #1f1f1f panels, the title bar, the dialog, a public choice bg-2 #2b2b2b inputs, menus, hovered rows, toasts bg-3 #333333 pressed controls, hovered menu items Target: WCAG 2.2 Level AA — 4.5:1 for text, 3:1 for large text, control boundaries, focus rings and status glyphs (SC 1.4.3, 1.4.11). RAW LITERALS. Hex appears in this file only, anywhere in the product. Need a colour? Add a token here and record its pairings in docs/design/godsend-theme.md §4. ========================================================================== */ :root { /* ---- grounds ------------------------------------------------------------ PURE BLACK, against the old palette's #121212. The show's site sets `body.custom-background { background-color: #000000 }` and alternates full-bleed #000 and #1f1f1f bands; that alternation IS the look, and it only reads at full strength from a true black. The halo argument that justified #121212 applied to a console read for hours, not to a chooser opened for four seconds inside a social app. The three lifts above it are FARTHER apart than the old set (1.27 / 1.48 / 1.66 against the page, where the old ones managed 1.09 / 1.21 / 1.14), so elevation is legible without a border doing the work. */ --bg-0: #000000; --bg-1: #1f1f1f; /* 1.27:1 vs bg-0 — the brand band */ --bg-2: #2b2b2b; /* 1.48:1 vs bg-0 · 1.16:1 vs bg-1 */ --bg-3: #333333; /* 1.12:1 vs bg-2 */ /* The SELECTED ground: bg-2 warmed with a tenth of the red, for a card row an operator has picked (a radio group's chosen choice, admin.css §2). Faint on purpose — the red-ink edge and the radio's own dot carry the state; this only keeps the row from reading as untouched. On it: ink-1 13.18 · ink-2 7.17 · ink-3 4.80 · a red-ink edge 4.50 · edge-ctl 3.57. A --red edge would measure 2.53 and fail the non-text floor. */ --bg-selected: #3a2d2d; /* ---- edges -------------------------------------------------------------- edge-1 is STRUCTURE (panel outlines, rules): 1.79:1 vs bg-0, 1.41:1 vs bg-1. It is not a control boundary, so SC 1.4.11 does not bind it. edge-ctl IS a control boundary and clears 3:1 on all four grounds: 5.69 bg-0 · 4.47 bg-1 · 3.84 bg-2 · 3.42 bg-3. */ --edge-1: #383838; --edge-ctl: #858585; --edge-ctl-hover: #bfbfbf; /* = ink-2; 7.70:1 vs bg-2 */ /* ---- ink ---------------------------------------------------------------- Three steps, no alphas. ink-1 and ink-2 are the show's own #ffffff and #bfbfbf; ink-3 is the derived third step. Nothing quieter exists. ink-1 21.00 bg-0 · 16.48 bg-1 · 14.16 bg-2 · 12.63 bg-3 ink-2 11.42 bg-0 · 8.96 bg-1 · 7.70 bg-2 · 6.87 bg-3 ink-3 7.65 bg-0 · 6.00 bg-1 · 5.16 bg-2 · 4.60 bg-3 */ --ink-1: #ffffff; --ink-2: #bfbfbf; --ink-3: #9c9c9c; /* ---- the brand red ------------------------------------------------------ TWO reds, and the split is the one thing in this file that is easy to get wrong. The show's #c23d3d is a deep brick, not the old neon, and it is dark enough that WHAT IT IS BEING USED FOR decides which token to reach for. --red is the FILL and the LARGE-TEXT red — the heading colour the show's own h1–h6 rule uses, the primary button's background, a boundary on the two dark grounds. As text it measures 4.03 bg-0 · 3.16 bg-1, which clears AA for LARGE text only (>=24px, or >=18.66px bold): headings qualify, body copy does not. As a boundary it clears 3:1 on bg-0 and bg-1 and FAILS on bg-2 (2.72) and bg-3 (2.42) — so a red edge on a hovered or pressed surface must be red-ink, never this. --red-ink is the red for everything small or on a light ground: a red word at body size, the focus ring, a destructive label, a boundary on bg-2/bg-3. 7.17 bg-0 · 5.62 bg-1 · 4.83 bg-2 · 4.31 bg-3 — text-legal on the first three grounds and over the 3:1 non-text floor on all four. THE FOCUS RING USES THIS ONE. A --red ring would measure 2.42:1 against a pressed control and fail SC 1.4.11 silently. ON A FILLED RED CONTROL THE LABEL IS WHITE (--ink-on-red), which is the reverse of the old palette: the old neon needed a dark label because white on it measured 3.42:1, and white on this red measures 5.21:1. Hover and active therefore go DARKER rather than lighter — the label gains at each step (5.21 → 5.97 → 6.54) where lightening would have cost it, and both stay over 3:1 against the page (3.52, 3.21) so the fill still reads as a control boundary. */ --red: #c23d3d; --red-hover: #b23838; --red-active: #a83437; --red-ink: #ee706b; --ink-on-red: #ffffff; /* ---- type --------------------------------------------------------------- TWO FAMILIES, BOTH SELF-HOSTED (fonts.css, public/fonts/README.md), and both taken from the show's site rather than chosen here: its Divi theme names them in --et_global_heading_font and --et_global_body_font. --font-display is American Captain Eternal: heavy, condensed, squared. It carries headings and control labels — on the show's site it is the heading face AND the button face, and that is exactly how it is used here. It ships in ONE weight and its usWeightClass is 400, so every rule that uses it says `font-weight: 400`; fonts.css switches synthesis off so an accidental 700 cannot smear it. The fallbacks are the narrowest faces that are actually installed on a stock machine, so a blocked or failed font load degrades to something condensed rather than to Helvetica. --font-sans is Lato, the show's body face, with a system stack behind it. */ --font-display: "American Captain", "Oswald", "Arial Narrow", "Haettenschweiler", Impact, sans-serif; --font-sans: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif; --font-mono: ui-monospace, "Cascadia Mono", "Segoe UI Mono", Menlo, Consolas, monospace; /* The display face is condensed, so it wants tighter leading and a little tracking to keep its verticals from closing up. These are the two numbers every display rule reuses rather than restating. */ --display-leading: 0.95; --display-tracking: 0.01em; --text-xs: 12px; --text-sm: 13px; --text-md: 14px; --text-lg: 16px; --text-xl: 20px; --text-2xl: 24px; /* The public surfaces set larger than the console: the show's site runs 18px/1.7 body copy, and these pages are read at arm's length on a phone rather than scanned at a desk. */ --text-body-public: 17px; --leading-public: 1.6; /* ---- space (4px base) ---------------------------------------------------- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; /* 6px is the show's own button radius. --radius-lg was 10px and is now 8px: the brand's corners are squarer than the old console's, and a condensed display face reads wrong inside a soft box. */ --radius-sm: 4px; --radius-md: 6px; --radius-lg: 8px; --radius-pill: 999px; /* ---- controls ------------------------------------------------------------- 36px standalone, 28px in a dense row (SC 2.5.8's floor is 24px), 44px on the phone. */ --control-h: 36px; --control-h-sm: 28px; --tap: 44px; --field-line: calc(1.5 * var(--text-sm) + var(--space-1)); /* a label block's height */ /* ---- the shell ----------------------------------------------------------- */ --titlebar-h: 52px; --nav-w: 224px; --nav-rail-w: 56px; --nav-drawer-w: 272px; --content-max: 1280px; --measure: 68ch; --shadow-pop: 0 8px 24px rgba(0, 0, 0, 0.55); --shadow-dialog: 0 24px 64px rgba(0, 0, 0, 0.6); --z-titlebar: 30; --z-nav: 20; --z-menu: 40; --z-toast: 50; --z-skip: 60; color-scheme: dark; accent-color: var(--red); }