/** * SNYCF — Design tokens * * Every value here was measured out of /design-reference/ during the Phase 0 * audit. Nothing is invented. Where the audit found an accessibility failure, * the brand value is kept and a surface-specific token is added alongside it. * * @package snycf */ :root { /* --------------------------------------------------------------------- * Brand palette — measured frequencies from the export in comments * ------------------------------------------------------------------ */ --snycf-ink: #0a0a0a; /* 822 uses — masthead, footer, rules */ --snycf-accent: #e21b23; /* 772 uses — accountability red */ --snycf-paper: #ffffff; /* 525 uses — default ground */ --snycf-meta: #737373; /* 393 uses — metadata, captions */ --snycf-ink-2: #2a2a2a; /* 241 uses — prose; borders on dark */ --snycf-rule: #e5e5e5; /* 200 uses — 1px dividers */ --snycf-rule-soft: #d4d4d4; /* 169 uses — inputs, inactive pills */ --snycf-meta-dark: #a3a3a3; /* 156 uses — metadata on dark */ --snycf-prose-dark: #c9c9c9; /* 90 uses — prose on dark */ --snycf-bar: #171717; /* 17 uses — utility bar only */ --snycf-stock: #f6f5f2; /* 16 uses — off-white bands */ --snycf-hover-tint: #fafaf8; /* 5 uses — tile hover ground */ --snycf-accent-deep: #c4141b; /* 5 uses — red button hover */ /* --------------------------------------------------------------------- * Accessible surface-specific tokens * * Phase 0 found three WCAG 2.1 AA failures. The brand values above are * unchanged; these exist so text picks the readable variant for the * surface behind it. Never use --snycf-meta or --snycf-accent for small * text on --snycf-stock or --snycf-ink. * ------------------------------------------------------------------ */ /* #737373 on #f6f5f2 = 4.35:1 FAIL -> #666666 = 5.27:1 PASS */ --snycf-meta-on-stock: #666666; /* #737373 on #0a0a0a = 4.18:1 FAIL -> #8a8a8a = 5.74:1 PASS */ --snycf-meta-on-ink: #8a8a8a; /* #e21b23 on #0a0a0a = 4.16:1 FAIL -> #ff4a50 = 5.98:1 PASS * Small text only. Fills, rules and type >= 18.66px bold keep the brand * red, which is compliant at large sizes. */ --snycf-accent-on-ink: #ff4a50; /* --------------------------------------------------------------------- * Semantic surface roles * * Components reference these, not the raw brand values, so a surface can * be restyled in one place. * ------------------------------------------------------------------ */ --snycf-surface: var( --snycf-paper ); --snycf-surface-alt: var( --snycf-stock ); --snycf-surface-inverse: var( --snycf-ink ); --snycf-surface-bar: var( --snycf-bar ); --snycf-text: var( --snycf-ink ); --snycf-text-prose: var( --snycf-ink-2 ); --snycf-text-meta: var( --snycf-meta ); --snycf-text-on-inverse: var( --snycf-paper ); --snycf-text-prose-on-inverse: var( --snycf-prose-dark ); --snycf-text-meta-on-inverse: var( --snycf-meta-on-ink ); --snycf-border: var( --snycf-rule ); --snycf-border-soft: var( --snycf-rule-soft ); --snycf-border-strong: var( --snycf-ink ); --snycf-border-on-inverse: var( --snycf-ink-2 ); --snycf-link: var( --snycf-ink ); --snycf-link-hover: var( --snycf-accent ); --snycf-focus: var( --snycf-accent ); /* --------------------------------------------------------------------- * Typography * ------------------------------------------------------------------ */ --snycf-font-ui: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif; --snycf-font-editorial: 'Source Serif 4', Charter, 'Iowan Old Style', Georgia, serif; --snycf-weight-medium: 500; --snycf-weight-semibold: 600; --snycf-weight-bold: 700; --snycf-weight-extrabold: 800; --snycf-weight-black: 900; /* Type scale — 14 steps, normalised from the 40 distinct pixel values * measured in the export. Fluid where the export used clamp(). */ /* Display / headline — editorial serif */ --snycf-size-display: clamp( 3rem, 1.75rem + 5.33vw, 4.75rem ); /* 48 -> 76 borough H1 */ --snycf-size-h1: clamp( 2.125rem, 1.4rem + 3.1vw, 3.375rem ); /* 34 -> 54 story H1 */ --snycf-size-h2: clamp( 1.625rem, 1.2rem + 1.8vw, 2.375rem ); /* 26 -> 38 band H2 */ --snycf-size-h3: clamp( 1.375rem, 1.2rem + 0.75vw, 1.875rem ); /* 22 -> 30 lead card */ --snycf-size-h4: 1.1875rem; /* 19 row card */ --snycf-size-deck: clamp( 1.0625rem, 1rem + 0.3vw, 1.3125rem ); /* 17 -> 21 deck */ /* Reading */ --snycf-size-prose: 1.15625rem; /* 18.5 article body */ --snycf-size-prose-sm: 1.03125rem; /* 16.5 card deck, excerpts */ --snycf-size-body: 1rem; /* 16 default */ /* UI — Archivo */ --snycf-size-label: 0.9375rem; /* 15 section heading */ --snycf-size-nav: 0.78125rem; /* 12.5 navigation */ --snycf-size-meta: 0.71875rem; /* 11.5 metadata */ --snycf-size-kicker: 0.6875rem; /* 11 kicker */ --snycf-size-badge: 0.625rem; /* 10 badges */ /* Line heights */ --snycf-leading-tight: 1.05; --snycf-leading-headline: 1.12; --snycf-leading-snug: 1.28; --snycf-leading-deck: 1.55; --snycf-leading-prose: 1.7; --snycf-leading-ui: 1.5; /* Tracking — the export's caps-and-rules system depends on these */ --snycf-tracking-display: -0.01em; --snycf-tracking-headline: -0.005em; --snycf-tracking-normal: 0; --snycf-tracking-meta: 0.08em; --snycf-tracking-nav: 0.06em; --snycf-tracking-label: 0.18em; --snycf-tracking-kicker: 0.2em; --snycf-tracking-eyebrow: 0.26em; /* --------------------------------------------------------------------- * Layout * ------------------------------------------------------------------ */ --snycf-container-wide: 1320px; /* 51 uses — homepage, archives, footer */ --snycf-container-article: 1100px; /* 13 uses — article + sidebar */ --snycf-container-page: 1000px; /* 8 uses — content and policy pages */ --snycf-container-narrow: 900px; /* 11 uses — about, contact, 404 */ --snycf-container-comments: 820px; /* 2 uses — discussion */ --snycf-measure: 700px; /* reading column */ --snycf-measure-prose: 68ch; /* character-based cap for running text */ /* Gutter. The export used 24px everywhere except the homepage, which used * 40px; Phase 0 resolved that to a single fluid gutter. */ --snycf-gutter: clamp( 1rem, 0.6rem + 1.7vw, 1.5rem ); /* 16 -> 24 */ /* --------------------------------------------------------------------- * Spacing — 4px base, matching the implicit grid in the export * ------------------------------------------------------------------ */ --snycf-space-3xs: 0.25rem; /* 4 */ --snycf-space-2xs: 0.5rem; /* 8 */ --snycf-space-xs: 0.75rem; /* 12 */ --snycf-space-sm: 1rem; /* 16 */ --snycf-space-md: 1.25rem; /* 20 */ --snycf-space-lg: 1.5rem; /* 24 */ --snycf-space-xl: 2rem; /* 32 */ --snycf-space-2xl: 2.5rem; /* 40 */ --snycf-space-3xl: 3rem; /* 48 */ --snycf-space-4xl: 3.5rem; /* 56 */ --snycf-space-5xl: 4rem; /* 64 */ --snycf-space-6xl: 4.5rem; /* 72 */ /* Section rhythm — fluid so vertical space compresses on small screens */ --snycf-section-gap: clamp( 2.5rem, 1.5rem + 4vw, 4rem ); /* 40 -> 64 */ --snycf-band-gap: clamp( 3rem, 2rem + 4.5vw, 4.5rem ); /* 48 -> 72 */ /* Grid and card gaps */ --snycf-gap-grid: clamp( 1.5rem, 1.2rem + 1.2vw, 2rem ); /* 24 -> 32 */ --snycf-gap-column: clamp( 2rem, 1.4rem + 2.4vw, 2.75rem ); /* 32 -> 44 */ --snycf-gap-sidebar: clamp( 2rem, 1.2rem + 3.2vw, 3.5rem ); /* 32 -> 56 */ /* --------------------------------------------------------------------- * Borders * * The 3px top rule is the signature device of the design system — it * opens almost every section in the export. * ------------------------------------------------------------------ */ --snycf-border-width-hair: 1px; --snycf-border-width-rule: 3px; --snycf-border-width-button: 2px; --snycf-rule-top: var( --snycf-border-width-rule ) solid var( --snycf-ink ); --snycf-rule-top-accent: var( --snycf-border-width-rule ) solid var( --snycf-accent ); --snycf-divider: var( --snycf-border-width-hair ) solid var( --snycf-rule ); --snycf-rule-gap: 0.875rem; /* 14px — space under a 3px rule */ /* Radii. The design is deliberately square: the only rounded shapes in * the entire export are the circular avatar slot and two app-icon * treatments on the brand sheet. There is no general radius token. */ --snycf-radius-none: 0; --snycf-radius-circle: 50%; /* --------------------------------------------------------------------- * Motion * ------------------------------------------------------------------ */ --snycf-transition-fast: 120ms ease; --snycf-transition: 180ms ease; --snycf-transition-panel: 240ms cubic-bezier( 0.2, 0, 0, 1 ); /* --------------------------------------------------------------------- * Elevation layers * ------------------------------------------------------------------ */ --snycf-z-base: 0; --snycf-z-raised: 10; --snycf-z-sticky: 50; /* matches the export's sticky header */ --snycf-z-overlay: 100; --snycf-z-panel: 110; /* mobile navigation */ --snycf-z-skip-link: 200; /* must clear the sticky header */ /* --------------------------------------------------------------------- * Touch * ------------------------------------------------------------------ */ --snycf-target-min: 44px; } /** * Inverse context. * * Any element on a dark ground carries .is-inverse, which remaps the semantic * roles to their accessible dark-surface variants. Components never hard-code * a dark-surface colour, so the three contrast fixes apply automatically. */ .is-inverse { --snycf-surface: var( --snycf-ink ); --snycf-surface-alt: var( --snycf-bar ); --snycf-text: var( --snycf-paper ); --snycf-text-prose: var( --snycf-prose-dark ); --snycf-text-meta: var( --snycf-meta-on-ink ); --snycf-border: var( --snycf-ink-2 ); --snycf-border-soft: var( --snycf-ink-2 ); --snycf-border-strong: var( --snycf-paper ); --snycf-link: var( --snycf-paper ); --snycf-link-hover: var( --snycf-accent-on-ink ); background-color: var( --snycf-surface ); color: var( --snycf-text ); } /** * Off-white context. Used by the victim-stories band, the discussion section * and editor's-note blocks. Darkens metadata to clear 4.5:1 on #f6f5f2. */ .is-stock { --snycf-surface: var( --snycf-stock ); --snycf-text-meta: var( --snycf-meta-on-stock ); background-color: var( --snycf-surface ); }