/* =========================================================================== Politick — design tokens · "Broadcast · Soft red" --------------------------------------------------------------------------- Source of truth (one of three encodings; keep in sync with tokens.ts + DESIGN.md). All custom properties are prefixed `--pk-`. Import `fonts.css` for the @font-face rules that back --pk-font-display / --pk-font-sans / --pk-font-mono. CONTRACT for the mark / motif workers and the site — these names are stable: COLOUR --pk-ink --pk-paper --pk-accent --pk-alert --pk-ink-strong --pk-muted --pk-faint --pk-rule --pk-rule-faint --pk-paper-raised --pk-accent-strong TYPE --pk-font-display --pk-font-sans --pk-font-mono SHAPE --pk-radius (= 0) --pk-hairline --pk-rule-w --pk-rule-w-strong On dark sections, set data-theme="ink" (or class .pk-on-ink): surface/text/ accent remap below — the SAME token names resolve to dark-surface values, so components and motifs need no per-theme code (strokes use currentColor; the broadcast dot uses var(--pk-accent)). =========================================================================== */ :root { color-scheme: light; /* --- Brand core (FIXED — do not alter) -------------------------------- */ --pk-ink: #1C2024; /* primary text & strokes · CR 14.8 on paper (AAA) */ --pk-paper: #F6F3EC; /* primary surface (warm paper) */ --pk-accent: #B84A38; /* THE soft red — used SPARINGLY · CR 4.65 on paper (AA) */ --pk-alert: #D7372A; /* brighter red — RESERVED for error/alert states only */ /* --- Neutral ramp (warm greys derived from ink↔paper) ----------------- */ --pk-ink-strong: #3A3B3C; /* secondary headings / strong text · CR 10.1 (AAA) */ --pk-muted: #5C564E; /* muted & secondary text, captions · CR 6.54 (AA) */ --pk-faint: #8C8A84; /* disabled, placeholder, NON-essential UI · CR 3.1 */ --pk-rule: #D8D2C4; /* hairlines, dividers, table borders */ --pk-rule-faint: #E6E2D9; /* very subtle dividers, zebra rows, inset rules */ --pk-paper-raised: #FBFAF5; /* raised surface (table head, panels) — tint, no shadow */ /* Accent companions */ --pk-accent-strong: #A23E2D; /* pressed/active accent on paper (darker soft red) */ --pk-accent-tint: #EFD9D2; /* faint accent wash for selection / highlight on paper */ /* --- Party dots (PENDING real party register) ------------------------- */ /* Party colours are DATA, not brand. They appear ONLY as ≤8px dots, never as fills, and must map to each party's real colour once the register is loaded. Placeholders below are arbitrary muted hues — DO NOT ship as final. */ --pk-party-size: 8px; /* hard cap on party-dot diameter */ --pk-party-a: #8A5A44; --pk-party-b: #4E6E8A; --pk-party-c: #6E8A5A; --pk-party-d: #8A6E4E; --pk-party-e: #6E5A8A; --pk-party-f: #7A7A72; /* --- Typography: families (see fonts.css / fonts.md) ------------------- */ --pk-font-display: "Playfair Display", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif; --pk-font-sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; --pk-font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace; /* Weights */ --pk-weight-regular: 400; --pk-weight-medium: 500; --pk-weight-semibold:600; --pk-weight-bold: 700; /* --- Type scale — Major Third (1.250), base 16px ---------------------- */ /* Heading ramp is modular; the three fine UI sizes (2xs/xs/sm) sit off-grid for legibility at small sizes (a real-world UI convention). */ --pk-text-2xs: 0.6875rem; /* 11px — kickers, eyebrow labels (uppercase, tracked) */ --pk-text-xs: 0.8125rem; /* 13px — captions, mono citations, fine print */ --pk-text-sm: 0.875rem; /* 14px — secondary UI, dense tables */ --pk-text-base: 1rem; /* 16px — body */ --pk-text-md: 1.25rem; /* 20px — large body / sub-head (sans), small lead */ --pk-text-lg: 1.5625rem; /* 25px — h3 */ --pk-text-xl: 1.953rem; /* 31.25px — h2 */ --pk-text-2xl: 2.441rem; /* 39px — h1 */ --pk-text-3xl: 3.052rem; /* 49px — page hero / display */ --pk-text-4xl: 3.815rem; /* 61px — wordmark / masthead */ /* Line-heights */ --pk-leading-display: 1.08; /* Playfair headlines / masthead (tight) */ --pk-leading-tight: 1.2; /* sub-heads */ --pk-leading-lead: 1.4; /* serif lead paragraphs */ --pk-leading-body: 1.6; /* long-form reading */ --pk-leading-ui: 1.5; /* dense UI, mono */ /* Letter-spacing (tracking) */ --pk-track-display: -0.01em; /* slight tighten on large Playfair headlines */ --pk-track-wordmark: 0.005em;/* the "Politick" lockup */ --pk-track-body: 0; --pk-track-caps: 0.14em; /* uppercase kickers / section labels */ --pk-track-tagline: 0.18em; /* the masthead tagline (uppercase, widely tracked) */ /* Feature settings (apply where relevant) */ --pk-font-tabular: "tnum" 1, "lnum" 1; /* tabular lining figures (data/mono/tables) */ --pk-font-body: "kern" 1, "liga" 1; /* default text */ /* --- Measure / layout ------------------------------------------------- */ --pk-measure: 66ch; /* ideal reading column (60–75ch) */ --pk-content-max: 75rem; /* 1200px — main content max width */ --pk-content-narrow: 42rem; /* 672px — article / reading max width */ --pk-gutter: 1.5rem; /* grid gutter (24px) */ --pk-grid-columns: 12; /* --- Spacing scale (base unit 4px) ------------------------------------ */ --pk-space-0: 0; --pk-space-1: 0.25rem; /* 4 */ --pk-space-2: 0.5rem; /* 8 */ --pk-space-3: 0.75rem; /* 12 */ --pk-space-4: 1rem; /* 16 */ --pk-space-5: 1.5rem; /* 24 */ --pk-space-6: 2rem; /* 32 */ --pk-space-7: 3rem; /* 48 */ --pk-space-8: 4rem; /* 64 */ --pk-space-9: 6rem; /* 96 */ --pk-space-10: 8rem; /* 128 */ /* --- Shape: NO rounded corners anywhere ------------------------------- */ --pk-radius: 0; /* explicit: editorial / printed-document, never rounded */ --pk-hairline: 1px; /* finest rule (table cells, inset dividers) */ --pk-rule-w: 1.5px; /* default rule / border weight */ --pk-rule-w-strong: 2px; /* emphasis rule (section / footer top border) */ --pk-border: var(--pk-rule-w) solid var(--pk-rule); --pk-border-ink: var(--pk-rule-w) solid var(--pk-ink); /* --- Elevation: flat. No drop shadows. -------------------------------- */ /* Separation is by rules + surface tint (--pk-paper-raised), never by shadow. */ --pk-elevation: none; /* --- Motion: calm, short, reduced-motion-aware ------------------------ */ --pk-motion-fast: 120ms; --pk-motion: 200ms; --pk-motion-slow: 320ms; --pk-ease: cubic-bezier(0.2, 0, 0, 1); /* calm decelerate */ --pk-ease-inout: cubic-bezier(0.4, 0, 0.2, 1); --pk-pulse: 1200ms; /* the one-shot broadcast pulse on load */ } /* --------------------------------------------------------------------------- Dark / inverted surface. Same token names, ink-surface values. Use on hero bands, footers, "live sitting" sections. The soft red lifts to --pk-accent-strong's lighter sibling so a key word stays AA on ink. --------------------------------------------------------------------------- */ [data-theme="ink"], .pk-on-ink { color-scheme: dark; --pk-paper: #1C2024; /* surface becomes ink */ --pk-paper-raised: #25292E; /* raised panel on ink */ --pk-ink: #F6F3EC; /* text becomes paper · CR 14.8 (AAA) */ --pk-ink-strong: #E4E0D8; /* strong text */ --pk-muted: #A6A39C; /* muted text on ink · CR ~6.4 */ --pk-faint: #6E726F; /* faint / disabled on ink */ --pk-rule: #3C4147; /* hairline on ink */ --pk-rule-faint: #2A2E33; /* subtle divider on ink */ --pk-accent: #CF6A55; /* lifted soft red · CR 4.56 on ink (AA) */ --pk-accent-strong:#B84A38; /* pressed accent on ink */ --pk-accent-tint: #3A2A26; /* faint accent wash on ink */ } /* Reduced motion: collapse all transitions/animations to instant. */ @media (prefers-reduced-motion: reduce) { :root { --pk-motion-fast: 0ms; --pk-motion: 0ms; --pk-motion-slow: 0ms; --pk-pulse: 0ms; } }