/* ============================================================ TOKEN BRIDGE — m434 block-library names, Steward Slightham values ------------------------------------------------------------ Phase 3 of the VSMA block-library port. WHY THIS FILE EXISTS. The block render parts and per-block stylesheets being ported from vsma-wp are written entirely against VSMA's 58-token vocabulary (--red, --navy, --slate, --bg-soft, --display, --m434-*). This theme defines 18 tokens with different names. The overlap is --ink and --maxw, and --ink holds a different colour in each. An unresolved custom property does not error — it falls back to nothing. So a VSMA stylesheet dropped in as-is renders unstyled or subtly wrong, with no console output and no build failure. That silent mode is the single largest source of breakage in this port, and this file is what prevents it. THE RULE: names are VSMA's, values are ours. tokens.css states the same contract from the other side — "the token NAMES are contractual … swap values, never names." This is that contract used as designed, and it is why every ported block file can stay byte-identical to its vsma-wp original: a later fix upstream stays a clean cherry-pick. DO NOT edit ported block CSS to use ds token names. Add the missing alias here instead. The moment block files diverge, the fleet-sharing argument behind the whole port is gone. Loaded immediately after tokens.css and before anything that consumes these names. Nothing in this theme uses them yet, which is deliberate: this file cannot break the current site, and it is in place before the first block arrives rather than landing with it. ============================================================ */ :root { /* ---- Accent, as an RGB TRIPLET ---------------------------------- Not a hex, and it must stay a triplet. VSMA's block CSS composes every translucent accent from one source — rgb(var(--vaccent)) and rgba(var(--vaccent),.4) — so collapsing this to a hex breaks every accent border, glow and hairline in the ported files. 72,92,199 is #485CC7, Steward Blue / PMS 2726. */ --vaccent: 72,92,199; --vaccent-lt: 154,165,224; /* #9AA5E0 — see --m434-accent-lt below */ /* ---- Contractual kit tokens ---- */ --red: rgb(var(--vaccent,72,92,199)); /* THE accent. Named --red by the kit; it is blue here. Renaming it would fork every block file. */ --red-dark: var(--blue-deep); /* accent hover on light surfaces */ --navy: var(--ink); /* dark section surface — see below */ --navy-deep: #1D2127; /* deepest dark */ --slate: var(--grey-700); /* secondary / meta text — see note 2 */ --line: var(--grey-300); /* hairlines, rules, borders */ --bg-soft: var(--grey-100); /* light fill A — page surfaces */ --bg-cool: var(--blue-tint); /* light fill B — the only permitted fill per the identity guidelines */ --white: var(--paper); /* --ink and --maxw are NOT redefined. Both names already exist in tokens.css with this theme's own values, which is exactly what the bridge wants — ported CSS reading --ink gets Slightham ink. */ /* ---- Type lanes ---- VSMA maps display->Century Gothic/Jost and body->Montserrat. Here the identity guidelines are explicit: display is Jost (--geo), body is Inter (--sans), and serif is restricted to quotes/ledes only. The standing decision not to reintroduce serif headlines is upheld by mapping --display to --geo rather than to --serif. */ --display: var(--geo); --body: var(--sans); /* Kit-contractual only. This theme has no gradient type, exactly as VSMA has none; the token exists so .grad-text can never render transparent-on-transparent if a ported file references it. Do not use .grad-text in markup. */ --grad: linear-gradient(100deg, var(--ink) 0%, var(--ink) 42%, var(--red) 100%); /* ---- Elevation ---- Neutral rather than VSMA's values: theirs are tuned for dark industrial surfaces (up to .60 alpha) and read as heavy bruises on white. */ --shadow-sm: 0 4px 14px rgba(40,46,54,.10); --shadow-md: 0 10px 30px rgba(40,46,54,.14); --shadow-lg: 0 30px 80px rgba(40,46,54,.20); /* ============================================================ ACCESSIBILITY — and the one place this bridge is SIMPLER than VSMA ------------------------------------------------------------ VSMA splits its accent by role because #E5761E on white is 3.03:1 and fails WCAG AA for normal text, while being used on the most repeated text element in the design. Their --m434-accent-text is a deliberately deeper orange, #a34f0e at 5.70:1. That split is NOT needed here. Steward Blue #485CC7 on --paper is 5.78:1 — it passes AA for body text as-is, and comfortably. So --m434-accent-text is simply the accent, and accent-coloured text in a ported block is the real brand colour rather than a compromised near-match. Measured, not assumed: #485CC7 on #FFFFFF 5.78:1 AA body (accent text, links) #485CC7 on #282E36 2.37:1 FAILS (hence --m434-accent-lt) #9AA5E0 on #282E36 5.76:1 AA body (accent text on dark) #4A4D55 on #FFFFFF 8.45:1 AA body (--slate, see note 2) #8A8C93 on #FFFFFF 3.36:1 large only (--m434-slate-mute) ============================================================ */ --m434-accent-text: var(--blue); /* Accent text on DARK grounds. Steward Blue is far too dark on --ink (2.37:1), so this is the accent lifted ~44% toward white. It is the one value in this file with no counterpart in the identity guidelines — a new decision, not an alias — because the guidelines describe a light-only site and the ported blocks support dark bands. */ --m434-accent-lt: #9AA5E0; --m434-accent-hover-dark: #B6BEE9; /* link hover on dark surfaces */ /* ---- Greys ---- NOTE 2: this theme has fewer greys than VSMA, and the collapse is deliberate rather than lossy-by-accident. VSMA distinguishes --slate (#6b7280, 4.83:1) from --m434-slate-strong (#4b5563, 7.5:1). The nearest local equivalent to --slate by lightness is --grey-500, but that is 3.36:1 on white and FAILS AA for body text — and ported blocks use --slate for meta text at body size. Mapping it there would import an accessibility regression that does not exist in either theme today. So both map to --grey-700, and --grey-500 is kept for the decorative role VSMA itself reserves it for: inactive numerals and captions. */ --m434-slate-strong: var(--grey-700); --m434-slate-mute: var(--grey-500); --m434-slate-rgb: 74,77,85; /* #4A4D55, so hairline alphas compose from one source */ --m434-line-2: rgba(var(--m434-slate-rgb),.30); --m434-line-3: rgba(var(--m434-slate-rgb),.40); --m434-line-4: rgba(var(--m434-slate-rgb),.45); /* ---- Dark surfaces ---- This theme's design is light-only and currently uses no dark band. These exist so a ported block that offers a dark background resolves to something on-brand instead of nothing. Derived from --ink rather than invented: #282E36 at 72% / 62% / 68% toward black. White text clears 13.7:1 on all four. */ --m434-dark-2: #191D21; /* proof-bar surface */ --m434-dark-3: #1B1F25; /* testimonial surface */ /* ---- Semantic ---- No counterpart in the identity guidelines. Needed by ported form and status UI (field errors, "coming soon" pills). #B3261E is 6.54:1 on white; the guidelines permit no red, so this is scoped to error states only and must never be used decoratively. */ --m434-crimson: #B3261E; --m434-crimson-glow: 179,38,30; /* ============================================================ THE "INK" LAYER — a second tier that makes blocks ground-aware ------------------------------------------------------------ These are not extra colours. They are indirection: a ported block never reads --ink or --m434-accent-text directly for text, ring and wash colours — it reads one of these, and the SURFACE re-declares them. That is how a block adapts to the band it landed on without its markup knowing anything about the band. In vsma-wp these defaults live in global.css's :root and are overridden on .has-bg-accent, .cta:has(> .bg), .m434-alertbar--* and .m434-quote-band. Only the :root tier belongs in the bridge; the per-surface overrides arrive with whichever component is ported — except the dark-band swap, which is in sections-m434.css because m434_section_classes() can emit .dark-bg today. Miss this tier and ported blocks do not fail loudly: buttons lose their ring, links fall back to the browser blue, and focus outlines disappear. Exactly the silent mode this whole bridge exists to stop. ============================================================ */ --m434-ink-rgb: 40,46,54; /* #282E36, so every ink alpha composes from one source. vsma-wp hardcodes 48,48,48 in three places instead; composing is the fix, not a divergence worth preserving. */ --m434-surface-ink: var(--ink); --m434-muted-ink: var(--m434-slate-strong); --m434-accent-ink: var(--m434-accent-text); --m434-accent-ink-hover: var(--blue-deep); --m434-link-ink: var(--m434-accent-text); --m434-link-ink-hover: var(--blue-deep); --m434-accent-ring: var(--red); --m434-focus-ring: var(--ink); --m434-btn-ink: var(--ink); --m434-btn-ring: rgba(var(--m434-ink-rgb),.55); --m434-btn-ring-hover: rgba(var(--m434-ink-rgb),.70); --m434-btn-wash: rgba(var(--m434-ink-rgb),.05); /* Inline icon masks, copied verbatim from vsma-wp. Black-stroked because they are used as mask/background images and tinted by the consuming rule, so they carry no brand colour and need no bridging. */ --m434-arrow-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M12 5l7 7-7 7'/%3E%3C/svg%3E"); --m434-plus-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E"); /* ---- Interaction surfaces ---- */ --m434-input-border: var(--grey-300); --m434-hover-light: var(--grey-100); --m434-hover-row: #F9F9FA; --m434-hover-tile: #ECECEF; /* ---- Measures + containers ---- Kept in VSMA's absolute units rather than mapped to this theme's 64ch, because .prose is NOT bridged (see sections-m434.css) and these are only read by ported block files. */ --m434-maxw-narrow: 900px; --m434-maxw-quote: 960px; --m434-measure: 760px; --m434-measure-wide: 820px; /* ---- Rhythm ---- Matched to this theme, not to VSMA's mobile-first ladder. --m434-section-y is section.S's existing padding, so a block band sits on the same rhythm as every hand-built section on the site. */ --m434-gutter: var(--margin); --m434-section-y: clamp(64px, 9vw, 96px); --m434-header-h: 64px; /* nav.bar .wrap height */ /* ---- Primitives ---- */ --m434-rule-inset: inset 0 0 0 1px var(--line); --m434-rule-accent: inset 0 0 0 1px rgba(var(--vaccent,72,92,199),.5); --m434-ease: var(--ease); --m434-anchor-offset: calc(var(--m434-header-h) + 16px); /* Breakpoints, documented for reference only — custom properties cannot be used in @media queries, so these values are repeated literally wherever they are needed. This theme's own breakpoints are 560 / 881px; VSMA's ladder is kept here because ported block CSS contains its literals. */ --m434-bp-sm: 480px; --m434-bp-md: 768px; --m434-bp-lg: 1024px; --m434-bp-xl: 1200px; }