/* ============================================================= Who Killed Mr. E — Design tokens Direction: "Blackout" — the ink of an official record, and the black bar drawn over it. Actor identity colors are NOT decided here. They come from en/layouts.json, which is the source of truth for what color each actor's deck is. This file mirrors those five values and derives everything that has to sit on top of them. Every value below is a decision. Do not add colors here without retiring one. ============================================================= */ :root { /* --------------------------------------------------------- 1. GROUND — the two materials the game is made of. Ink and paper are no longer the faction system; they are the two panel treatments, and they are also where two of the five actors happen to sit (see §3). --------------------------------------------------------- */ /* Ink. --ink-900 is reserved: it is the redaction bar and nothing else may claim it. This is now literally true — no actor field and no panel uses it, so a bar is always a bar. */ --wk-ink-900: #08090a; --wk-ink-800: #14161a; /* dark panel */ --wk-ink-700: #23262c; --wk-ink-600: #33373f; --wk-ink-500: #4a4f58; /* Paper. Cold grey-white — a photocopy, not a letterpress cream. The case file has been through a machine. */ --wk-paper-000: #f6f7f4; /* light panel, card border */ --wk-paper-100: #e9eae6; --wk-paper-200: #dcded9; --wk-paper-300: #c9ccc7; --wk-paper-400: #aab0aa; /* Frame slate — inherited from the printed v27 cards, kept only as the blocked-Homeland state. Note it now sits close to the Detective field; do not use it as an actor color. */ --wk-slate-400: #7c87a0; /* --------------------------------------------------------- 2. FLAG — Homelands are US states. The stripes and the star come from the flag and are used nowhere else. --------------------------------------------------------- */ --wk-flag-red: #a61c22; --wk-flag-navy: #1b2a4e; --wk-flag-white: #f6f7f4; /* Flag red and navy are both too dark to read on an ink page, so the dark doc surface uses these lifted stops. Both clear 4.5:1 on --ink-900. */ --wk-flag-red-lift: #e8635c; --wk-flag-navy-lift: #5777c5; /* --------------------------------------------------------- 3. ACTORS — mirrored from en/layouts.json. layouts.json key token Layout-Evil --wk-villain (CSVs: Evil-NN, Actor "Villain") Layout-Politician --wk-politician Layout-Media --wk-media Layout-Victim --wk-victim Layout-Detective --wk-detective These five are FIELD colors: the actor owns the whole card ground, not an accent on it. Change a value here only by changing layouts.json first. There are no -deep / -lift stops any more. The old palette needed three stops per actor because an actor color had to survive on both a light and a dark ground. Now each actor has exactly one ground — its own — and the panel is chosen to contrast with it, so one stop is all that is required. This palette does NOT separate on hue. Two of the five are achromatic (Villain chroma 0, Victim chroma 5) so hue distance is meaningless for them. It separates on three axes at once — lightness, chroma and hue — which is why every pair is distinguishable even where two are close on any single axis: Villain #232323 L 14% chroma 0 Media #880000 L 27% chroma 136 Detective #666f88 L 47% chroma 34 Politician #bf9e32 L 47% chroma 141 Victim #ebebe6 L 91% chroma 5 --------------------------------------------------------- */ --wk-villain: #232323; /* the ink extreme of the ladder */ --wk-politician: #bf9e32; --wk-media: #880000; --wk-victim: #ebebe6; /* the paper extreme of the ladder */ --wk-detective: #666f88; /* --------------------------------------------------------- 4. FACTIONS — no color at all, not even a ground. Faction used to be ink coverage. It cannot be, now that the Villain's field IS ink and the Victim's IS paper — each would be invisible on its own card (1.27:1 and 1.01:1 respectively). Faction is carried by ONE mark: the redaction bar across the actor band. Cover-Up cards wear the bar. Truth cards do not. A full-width black bar at a fixed height is a shape, and shape reads across a table where hue does not. --------------------------------------------------------- */ /* --------------------------------------------------------- 5. STATE — feedback in the docs and any digital surface. --------------------------------------------------------- */ --wk-blocked: var(--wk-slate-400); /* HL blocked until next turn */ --wk-nullified: var(--wk-ink-500); /* special action lost */ --wk-focus: #ffd23d; /* keyboard focus, never used decoratively */ /* --------------------------------------------------------- 6. TYPE Four faces, all SIL OFL, all installable for print. Display Big Shoulders Display — tall narrow American signage grotesque. Headlines, card titles, NS thresholds. Stencil Big Shoulders Stencil Display — classification stamps ONLY. Two components. Do not spread it. Body Public Sans — the US federal government's own typeface (USWDS). A game about US institutions, set in the type those institutions use. Mono Courier Prime — card IDs, file metadata, the typewriter of the dossier. Fallbacks are listed so this file works offline and in print RIPs that lack the webfonts. --------------------------------------------------------- */ --wk-font-display: "Big Shoulders Display", "Oswald", "Haettenschweiler", "Arial Narrow", sans-serif; --wk-font-stencil: "Big Shoulders Stencil Display", var(--wk-font-display); --wk-font-body: "Public Sans", "Source Sans 3", "Segoe UI", system-ui, sans-serif; --wk-font-mono: "Courier Prime", "Courier New", ui-monospace, monospace; /* Weights actually used. Anything else is off-system. */ --wk-weight-body: 400; --wk-weight-body-strong: 600; --wk-weight-display: 800; /* Screen type scale. Card type is sized in card units (see cards.css) because it must hold at 63 mm. */ --wk-text-2xs: 0.6875rem; --wk-text-xs: 0.8125rem; --wk-text-sm: 0.9375rem; --wk-text-md: 1.0625rem; --wk-text-lg: 1.375rem; --wk-text-xl: clamp(1.75rem, 1.2rem + 2.2vw, 2.5rem); --wk-text-2xl: clamp(2.5rem, 1.4rem + 4.6vw, 4.25rem); --wk-text-3xl: clamp(3.5rem, 1.6rem + 8vw, 7rem); --wk-leading-tight: 0.92; /* display only */ --wk-leading-body: 1.55; /* Tracking. Display is condensed and set tight; stamps and eyebrows are the only places letters get pushed apart. */ --wk-track-display: -0.01em; --wk-track-stamp: 0.14em; --wk-track-eyebrow: 0.22em; /* --------------------------------------------------------- 7. SPACE — 4px screen base, 4mm print base. --------------------------------------------------------- */ --wk-space-2: 0.5rem; --wk-space-3: 0.75rem; --wk-space-4: 1rem; --wk-space-6: 1.5rem; --wk-space-8: 2rem; --wk-space-16: 4rem; --wk-space-24: 6rem; --wk-measure: 68ch; /* rules text never runs wider */ /* --------------------------------------------------------- 8. FORM — corners and rules. Cards are rounded because they are cards. Everything printed on them is square, because a document is square. --------------------------------------------------------- */ --wk-radius-card: 3.5mm; --wk-radius-panel: 0.75mm; --wk-radius-chip: 999px; --wk-hair: 1px; --wk-keyline: 2px; /* Bleed is 3 card units and lives in cards.css §12, not here: as a token it would have to be a length, and a length in mm mixed with a screen --wk-u of 3.6px renders the wrong proportion on the specimen sheet. */ /* --------------------------------------------------------- 9. MOTION — one gesture: the wipe. Bars uncover and recover. Nothing fades, nothing bounces. --------------------------------------------------------- */ --wk-ease-wipe: cubic-bezier(0.2, 0, 0, 1); --wk-dur-wipe: 320ms; --wk-dur-hover: 120ms; } /* Doc surface. Ink and paper swap roles by theme. Card colors are NOT redefined by theme — an actor's field color is decided by layouts.json, not by the reader's setting. */ :root { --wk-doc-bg: var(--wk-paper-100); --wk-doc-fg: var(--wk-ink-900); --wk-doc-muted: var(--wk-ink-500); --wk-doc-panel: var(--wk-paper-000); --wk-doc-line: var(--wk-paper-300); --wk-callout-accent: var(--wk-flag-red); --wk-chip-cost: var(--wk-flag-navy); --wk-chip-gain: var(--wk-flag-red); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --wk-doc-bg: var(--wk-ink-900); --wk-doc-fg: var(--wk-paper-100); --wk-doc-muted: var(--wk-paper-400); --wk-doc-panel: var(--wk-ink-800); --wk-doc-line: var(--wk-ink-600); --wk-callout-accent: var(--wk-flag-red-lift); --wk-chip-cost: var(--wk-flag-navy-lift); --wk-chip-gain: var(--wk-flag-red-lift); } } :root[data-theme="dark"] { --wk-doc-bg: var(--wk-ink-900); --wk-doc-fg: var(--wk-paper-100); --wk-doc-muted: var(--wk-paper-400); --wk-doc-panel: var(--wk-ink-800); --wk-doc-line: var(--wk-ink-600); --wk-callout-accent: var(--wk-flag-red-lift); --wk-chip-cost: var(--wk-flag-navy-lift); --wk-chip-gain: var(--wk-flag-red-lift); } @media (prefers-reduced-motion: reduce) { :root { --wk-dur-wipe: 1ms; --wk-dur-hover: 1ms; } }