/* ============================================================================ Just Another Day in CA — token foundation ---------------------------------------------------------------------------- THE FORK-PROOF LAYER. This file is the single source of truth for every dimensional and color value in the campaign site. It is plain CSS custom properties on purpose: that is the one form that survives every open substrate question. - Native WP block theme -> theme.json presets mirror these; this file is enqueued alongside. - CAWeb / Divi managed -> theme.json does not run there, but a managed tenant CAN take custom CSS. This file pastes in whole and everything still resolves. - Static spike / mockups -> link it directly. So the campaign creative is never re-authored when the hosting or design- system question resolves. Only the *packaging* around it changes. PROVENANCE: derived 2026-08-06 from docs/index.html, the 2026-07-25 fidelity rebuild against the Figma proposal (commit 80d30db, "verbatim copy + exact assets"). That file is the approved creative. Where theme.json disagreed with it, theme.json was pitch-era (2026-07-23, pre-rebuild) and this file follows the spike. The three visible divergences are listed in DECISIONS.md and are flagged for Aaron, not silently resolved. THEME-INVARIANT. This site has no light/dark switch, so no token here is themed and none is duplicated into a [data-theme] block. If a theme axis is ever added, every token below needs a parity check first. NAMING: `--jad-` (Just Another Day). Bare aliases for the spike's original names are kept at the bottom so docs/index.html keeps working untouched. ========================================================================= */ :root { /* --------------------------------------------------------------------- COLOR — locked creative. Do not tune without a creative decision. ------------------------------------------------------------------ */ --jad-color-navy: #0D1B2A; --jad-color-cream: #F5F0E8; --jad-color-crimson: #8B1A2E; --jad-color-white: #FFFFFF; --jad-color-black: #000000; /* Body/UI ink. Distinct from navy: navy is brand, ink is reading text. */ --jad-color-ink: #33404d; --jad-color-ink-soft: #444444; /* --------------------------------------------------------------------- THE MARK'S TWO COLOURS — the only two values in this file that are AUTHORITATIVE rather than candidate. Everything else here is either pitch-era (navy/cream/crimson, awaiting the retune) or sampled off a 90dpi JPEG board render. These two were read out of Misfit's production vector — `JustAnotherDay.ai`, dated 2026-07-30, type outlined, arrived 2026-08-18 in the creative kit. Not sampled from a render OF the vector: a 1600px raster of the same file measured #3A3A3A and #B68559, both shifted by colour management on the raster path. Primary source wins. --jad-color-charcoal the 18 type paths 14.75:1 on white (AAA) --jad-color-tan the CA-bracket path 3.37:1 on white THE TAN IS THE ONLY BRAND COLOUR THAT CLEARS 3:1 UNAIDED. Five of the seven rotation accents fail it, which is why the accent is decorative by rule (see ACCENT below). The tan is not a rotation member and is not subject to that rule — it belongs to the mark. CHARCOAL OVERTURNS A CORRECTION WE SHIPPED. CANDIDATE-TOKENS.md filed a correction-candidate arguing the true type fill was #000000 (with #1A1A1A as a compromise), from a JPEG cluster analysis that read #282828 as an anti-aliased edge tail. The vector says #282828. The original sample was right and the statistical correction was wrong; the reversal is recorded there rather than only here. These are PRIMITIVES, not roles, and nothing but the mark reaches for them yet. Whether charcoal becomes the site's reading ink belongs to the token retune (`4a7e21`), not to this block. ------------------------------------------------------------------ */ --jad-color-charcoal: #282828; --jad-color-tan: #B58151; /* --------------------------------------------------------------------- ACCENT — A SLOT, NEVER A VALUE. The 8/07 creative rotates its accent PER EXECUTION, not per sector: the same headline ships in orange on one board and lime on another. So a theme that hardcodes one campaign colour is off-brand by the second sector page. `--jad-accent` is the slot a surface fills; the value below is a PLACEHOLDER and belongs to the token retune (`4a7e21`). THE HARD RULE, and it is measured rather than stylistic: the accent is DECORATIVE and never carries contrast. Five of the seven candidate accents fail 3:1 against white -- mint 1.51, lime 1.29, amber 1.87, gold 2.09, coral 2.95; only purple and LED red pass. So no text, icon, border, or focus ring may take its colour from the accent, because the next execution's accent is not knowable today and would silently break the contrast the last one satisfied. That is why the accent appears in NO pair in tools/contrast-check.py. Its absence there is the design, not an oversight: a gate that checked today's accent would pass silently the moment a new execution introduced an ungated colour. What IS checkable is that brand assets never declare a colour at all -- tools/accent-slot-check.py. Anything that must be legible near an accent takes --jad-accent-ink. ------------------------------------------------------------------ */ --jad-accent: var(--jad-color-crimson); --jad-accent-ink: var(--jad-color-ink); /* Scrims + washes. Alpha-on-navy, used for image legibility. WCAG note: the hero scrim is load-bearing for contrast over photography, not decoration. Changing its stops requires re-checking hero text. */ --jad-scrim-navy-00: rgba(13, 27, 42, 0); --jad-scrim-navy-13: rgba(13, 27, 42, 0.13); --jad-scrim-navy-18: rgba(13, 27, 42, 0.18); --jad-scrim-navy-28: rgba(13, 27, 42, 0.28); --jad-scrim-navy-72: rgba(13, 27, 42, 0.72); --jad-scrim-navy-92: rgba(13, 27, 42, 0.92); --jad-scrim-white-92: rgba(255, 255, 255, 0.92); /* Hairline separators on a dark ground. Added 2026-08-13 for the footer divider, where reaching for white-92 would have drawn a near-solid white rule where a seam was wanted. */ --jad-scrim-white-24: rgba(255, 255, 255, 0.24); /* Composed gradients — defined once, referenced by name. */ --jad-gradient-hero: linear-gradient(0deg, var(--jad-scrim-navy-72) 0%, var(--jad-scrim-navy-28) 26%, var(--jad-scrim-navy-00) 55%); --jad-gradient-card: linear-gradient(to bottom, var(--jad-scrim-navy-00) 35%, var(--jad-scrim-navy-92) 100%); /* --------------------------------------------------------------------- TYPE FAMILIES ------------------------------------------------------------------ */ --jad-font-display: "Barlow Condensed", system-ui, sans-serif; --jad-font-body: "Barlow", system-ui, sans-serif; /* --------------------------------------------------------------------- TYPE SCALE Named from observed usage rather than re-derived, because the creative is approved against Figma and re-snapping it would change the design. Every size in the site is here; the set is now finite and greppable. KNOWN OVER-POPULATION, flagged not fixed: five distinct sizes live in the 11-15px band (11, 12, 13, 14, 15) where 14px does five of the nine jobs. That band reads as drift rather than intent. Consolidating it is a design call for Aaron -- see DECISIONS.md "token foundation". ------------------------------------------------------------------ */ --jad-text-eyebrow: 11px; /* section eyebrows; pairs with tracking-wider */ --jad-text-2xs: 12px; /* version badge */ --jad-text-xs: 13px; /* footer */ --jad-text-sm: 14px; /* workhorse meta: labels, card body, buttons */ --jad-text-nav: 15px; /* top nav */ --jad-text-base: 18px; /* body copy */ --jad-text-lead: clamp(18px, 2vw, 21px); /* narrative block */ --jad-text-hero-lead: clamp(19px, 2vw, 24px); /* hero subhead */ --jad-text-h3: 28px; /* card headings */ --jad-text-h2-sm: clamp(26px, 3vw, 32px); /* editorial */ --jad-text-h2: clamp(28px, 3.6vw, 38px); /* video */ --jad-text-h2-lg: clamp(34px, 4.4vw, 44px); /* facts */ --jad-text-stat: 44px; /* stat ribbon numerals */ --jad-text-display: clamp(52px, 7.2vw, 72px); /* hero h1 */ /* --------------------------------------------------------------------- LEADING — paired with the type steps above. ------------------------------------------------------------------ */ --jad-leading-none: 1; /* display + stat numerals */ --jad-leading-tight: 1.05; /* large headings */ --jad-leading-snug: 1.12; /* editorial h2 */ --jad-leading-heading: 1.25; /* fact leads */ --jad-leading-body: 1.45; /* small body */ --jad-leading-relaxed: 1.55; /* base body */ /* --------------------------------------------------------------------- TRACKING ------------------------------------------------------------------ */ --jad-tracking-tight: 0.01em; --jad-tracking-wide: 0.04em; /* buttons, stat labels */ --jad-tracking-wider: 0.12em; /* eyebrows */ /* --------------------------------------------------------------------- SPACE — linear, 4px base, per token-foundation.md (space is alignment and rhythm; a geometric scale regenerates non-aligning values). Steps are named by their multiple of the 4px base. ------------------------------------------------------------------ */ --jad-space-0: 0; --jad-space-1: 4px; --jad-space-2: 8px; --jad-space-3: 12px; --jad-space-4: 16px; --jad-space-5: 20px; --jad-space-6: 24px; --jad-space-7: 28px; --jad-space-8: 32px; --jad-space-9: 36px; --jad-space-11: 44px; --jad-space-12: 48px; --jad-space-16: 64px; --jad-space-18: 72px; --jad-space-21: 84px; /* Hairlines. Not spacing -- borders and 1px seams between full-bleed cards. */ --jad-hairline: 1px; --jad-rule: 4px; /* the crimson left rule on .fact */ /* Fluid page rhythm — named once here, never re-clamped per component. */ --jad-space-section: clamp(48px, 6vw, 64px); --jad-space-section-lg: clamp(48px, 6vw, 72px); /* --------------------------------------------------------------------- RADIUS — curated, integer-snapped. Each intent expressed once. ------------------------------------------------------------------ */ --jad-radius-sm: 2px; /* buttons, placeholder lines */ --jad-radius-md: 4px; /* video frame */ --jad-radius-lg: 6px; /* floating badge */ --jad-radius-circle: 50%; /* play button */ /* --------------------------------------------------------------------- LAYOUT ------------------------------------------------------------------ */ --jad-maxw: 1440px; --jad-gutter: 48px; /* Global chrome. Named here rather than inlined in base.css so the sticky header's height and the anchor offset that clears it cannot drift apart — they are the same number by construction, which is what makes /data/#{claim-id} land correctly under a sticky bar instead of behind it. The wordmark bands are the wireframe's, and they are measured rather than chosen: below a 56px lockup the two-line horizontal variant stops being legible, so that is the floor and the compact band swaps to the brandmark instead of scaling the lockup past it. RA13 checks the variant matches the band; RA14 checks the rendered cap height clears 14px. */ --jad-header-h: 72px; --jad-header-h-compact: 56px; --jad-wordmark-h: 64px; /* ≥64px band — variant B, two-line horizontal */ --jad-wordmark-h-floor: 56px; /* the measured floor for variant B */ --jad-wordmark-h-compact: 40px; /* ≤48px band — variant D, brandmark */ --jad-measure-prose: 1030px; /* narrative max-width */ --jad-measure-short: 20ch; /* editorial h2 */ --jad-measure-heading: 24ch; /* video h2 */ --jad-measure-footer: 52ch; /* --------------------------------------------------------------------- FOCUS — WCAG 2.1 AA (2.4.7 Focus Visible, 1.4.11 Non-text Contrast). A DUAL RING, and it has to be. Measured 2026-08-06 (npm-free, see tools/contrast-check.py): crimson clears 3:1 against cream at 8.10:1 but fails hard against navy at 1.89:1. The spike applied a single crimson ring globally, so keyboard focus was effectively invisible on every navy ground -- the top nav, the card buttons, the footer. No single color fixes it: white and cream both fail against cream, and crimson fails against navy. So the ring is two rings. The halo fills the offset gap, which means one of the two always contrasts with whatever is behind it: on cream ground -> halo disappears, crimson does the work (8.10:1) on navy ground -> halo does the work (15.33:1) on a crimson button -> halo does the work (9.19:1) Every one of those clears the 3:1 non-text minimum. Do not collapse this back to a single-color ring. ------------------------------------------------------------------ */ --jad-focus-color: var(--jad-color-crimson); /* inner ring */ --jad-focus-halo: var(--jad-color-cream); /* outer ring / gap fill */ --jad-focus-width: 3px; --jad-focus-offset: 3px; /* --------------------------------------------------------------------- MOTION — every duration referenced through a token so the reduced-motion override has one place to reach. ------------------------------------------------------------------ */ --jad-duration-fast: 0.18s; --jad-duration-none: 0.01ms; /* the reduced-motion kill value */ --jad-ease: ease; /* --------------------------------------------------------------------- TARGET SIZE — WCAG 2.5.8 minimum hit area. A standards floor rather than a taste value, which is exactly why it belongs here: if the engagement ever raises the global floor toward the 44px the takeaway copy affordances already require, it moves in one place. ------------------------------------------------------------------ */ --jad-target-min: 24px; /* ===================================================================== COMPATIBILITY ALIASES The 2026-07-25 spike (docs/index.html) authored bare names inline. These aliases let that file keep rendering byte-identically while the namespaced tokens above become canonical. Delete this block once the spike's inline