/* ============================================================ CARBOTURA SITE TOKENS — layout + legacy colour ============================================================ OWNERSHIP BOUNDARY (decided 2026-08-25, and deliberate) The split between this file and brand.carbotura.com is not "colour vs everything else". It is IDENTITY vs LAYOUT: BRAND owns identity ....... colour and registers, typefaces and weight allowlists, the mark. These make Carbotura recognisable; inconsistency across properties reads as a brand failure. Authority: brand.carbotura.com THIS FILE owns layout ..... spacing scale, corner radii, shadows, type SCALE (sizes and line-heights), container widths, durations and easing. A marketing hero and a data table legitimately need different sizes, and a 4px padding difference between properties is invisible as a brand matter. Centralising these would also hand brand a lever that reflows every property's layout. So this file does NOT go away when the colour migration finishes. It sheds its 19 --cb-* colour tokens and keeps 41 layout tokens permanently. That is a scope boundary, not unfinished work. THE THREE EXCEPTIONS, pending: --font-brand / --font-body / --font-mono are IDENTITY and should move to brand. Brand has already decided them (CRBT-FONT-DECISION 4.6: Audiowide, Inter, JetBrains Mono, Arial for editable Word) but expresses them as hardcoded literals in utility classes, not as tokens — so there is currently nothing to reference. They move when brand exposes them as tokens. Until then the values here must match that memo. ============================================================ DO NOT REPOINT THIS FILE AT brand.carbotura.com. The two share ZERO token names. Brand serves register-scoped tokens (--bedrock-*, --catalyst-*, --commons-*, --signal-*) and defines none of the names below. BLAST RADIUS of a swap — roughly 2,100 references, of which about 600 are colour and about 1,500 are type, spacing, radius and shadow. Deliberately approximate. The exact figure is generated by `node scripts/build-register-map.js` and moves whenever any page changes — including when this comment changes, which is how the last stale value was caught. A precise number copied into a hand-maintained comment is a mirror, and mirrors here go stale. Read the generator's output when the exact count matters. The shape is the part worth remembering: the non-colour half is roughly 2.5x the colour half, so a swap is a layout-and-typography failure, not merely a colour one. An earlier note here said 11,414 and 12,016. That count included every var(--x) that was not --cb-*, sweeping in tokens owned by OTHER stylesheets — admin-shell's --surface/--border, the brand section's own vars — none of which break if this file changes. The overstatement was 5.6x. The point survives: type, spacing and radii really do break too, so a swap is a layout-and-typography failure, not merely a colour one. KNOWN LATENT BUG — 7 --cb-* names are referenced but defined NOWHERE (31 references): --cb-text (19), --cb-mustard (5), --cb-bg (3), --cb-off-bg, --cb-card, --cb-off, --cb-emerald-lighter. They resolve to inherited or initial values and render acceptably by accident. Each needs a real assignment during migration. Two are already answered by brand's own retirement notes: --cb-mustard is a DROP (retired on colour-vision grounds — under red-green CVD it collapses toward khaki and becomes indistinguishable from Signal Orange, so it must NOT be remapped to anything amber-adjacent), and --cb-magenta maps to CATALYST (retired as redundant once Catalyst's CTA moved to Violet). Getting onto the brand system is a MIGRATION, not a sync: every colour call site is remapped to a register-scoped token, and which register each surface belongs to is a design decision owned by the Designer. Assign them in Admin → Config → Register Map. ============================================================ */ :root { /* ── Brand Colors ── */ --cb-emerald: #059669; /* Sustain Emerald — community, sustainability, CTAs */ --cb-emerald-mid: #047857; /* Darker emerald for hover states */ --cb-emerald-light: #d1fae5; /* Light emerald for backgrounds */ --cb-blue: #007FFF; /* Systems Blue — nav, topbar mark, universal */ --cb-blue-mid: #0066cc; /* Darker blue for hover */ --cb-blue-light: #dbeafe; /* Light blue for backgrounds */ /* --cb-magenta removed 2026-08-25: retired at brand as redundant once Catalyst's CTA moved to Violet. Its single use (404 page) now uses --cb-violet directly. Do not reintroduce. */ --cb-violet: #7C3AED; /* Aromatics Violet — materials, carbon products */ --cb-amber: #D97706; /* Regulatory Amber — regulatory warnings, review UI */ --cb-amber-light: #fef3c7; --cb-slate: #0A0C10; /* Deep Slate — dark backgrounds, hero */ --cb-steel: #374151; /* Forged Steel — secondary text, universal (a11y: darkened from #475569 for AA) */ /* ── Neutral Scale ── */ /* a11y 2026-05-27: secondary/muted greys darkened to meet WCAG AA on the #F8FAFC page (mid ~9:1, muted ~7:1) — "can't read greys" remediation. */ --cb-dark: #121418; /* Primary dark — body text, topbar */ --cb-mid: #374151; /* Secondary text (was #4A5568) */ --cb-muted: #4B5563; /* Muted text, labels (was #6B7280) */ --cb-rule: #E2E8F0; /* Borders, dividers */ --cb-surface: #F1F5F9; /* Card backgrounds, alternating sections */ --cb-page: #F8FAFC; /* Page background — warm off-white */ --cb-white: #FFFFFF; /* ── Previously-undefined tokens, defined 2026-08-25 ── Six names were referenced across the site (31 uses) but defined NOWHERE, resolving to inherited/initial values and rendering acceptably by accident. Each now aliases the existing token that matches its evident intent, so rendering is deterministic. PROVISIONAL: Shannon owns the final values in the register migration. */ --cb-text: var(--cb-dark); /* body text (19 uses) */ --cb-bg: var(--cb-page); /* page ground (3) */ --cb-off-bg: var(--cb-surface); /* offset ground (1) */ --cb-card: var(--cb-white); /* card ground (1) */ --cb-off: var(--cb-surface); /* offset panel (1) */ --cb-emerald-lighter: #ECFDF5; /* a step lighter than emerald-light (1) */ /* --cb-mustard: RETIRED at brand (CRBT-BRAND-ARCH v2.1) on colour-vision grounds — under red-green CVD it collapses toward khaki and becomes indistinguishable from Signal Orange. Brand's ruling is DROP, not remap. Aliased to Regulatory Amber ONLY so the 5 legacy uses (company/history award node, platform icon) stop resolving by accident; Shannon replaces the treatment in the migration. Do not add new uses. */ --cb-mustard: var(--cb-amber); /* ── Typography ── */ --font-brand: 'Audiowide', sans-serif; --font-body: 'Inter', sans-serif; --font-mono: 'JetBrains Mono', monospace; /* ── Type Scale ── */ /* a11y 2026-05-27: small sizes bumped for readability (xs 11→12, sm 13→14, base 15→16) */ --text-xs: 0.75rem; /* 12px */ --text-sm: 0.875rem; /* 14px */ --text-base: 1rem; /* 16px */ --text-lg: 1.125rem; /* 18px */ --text-xl: 1.25rem; /* 20px */ --text-2xl: 1.5rem; /* 24px */ --text-3xl: 1.875rem; /* 30px */ --text-4xl: 2.25rem; /* 36px */ --text-5xl: 3rem; /* 48px */ --text-hero: clamp(3rem, 9vw, 7rem); --text-section:clamp(1.8rem, 4vw, 3.5rem); --text-card: clamp(1.125rem, 2vw, 1.5rem); /* ── Spacing (8px base) ── */ --sp-1: 0.25rem; /* 4px */ --sp-2: 0.5rem; /* 8px */ --sp-3: 0.75rem; /* 12px */ --sp-4: 1rem; /* 16px */ --sp-5: 1.25rem; /* 20px */ --sp-6: 1.5rem; /* 24px */ --sp-8: 2rem; /* 32px */ --sp-10: 2.5rem; /* 40px */ --sp-12: 3rem; /* 48px */ --sp-16: 4rem; /* 64px */ --sp-20: 5rem; /* 80px */ --sp-24: 6rem; /* 96px */ /* ── Layout ── */ --max-width: 1200px; --content-width: 72ch; --topbar-height: 56px; --section-pad-v: clamp(var(--sp-12), 8vw, var(--sp-24)); /* ── Radii ── */ --radius-sm: 4px; --radius: 6px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-full:9999px; /* ── Shadows ── */ --shadow-sm: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06); --shadow: 0 4px 12px rgba(0,0,0,.08), 0 2px 6px rgba(0,0,0,.05); --shadow-md: 0 8px 24px rgba(0,0,0,.10), 0 4px 8px rgba(0,0,0,.06); --shadow-lg: 0 16px 48px rgba(0,0,0,.12), 0 8px 16px rgba(0,0,0,.06); /* ── Transitions ── */ --ease: cubic-bezier(.4,0,.2,1); --duration: 150ms; --duration-md:250ms; } /* Dark mode overrides — REMOVED 2026-06-30 The previous [data-theme="dark"] block flipped --cb-dark and --cb-white, creating site-wide contrast bugs because components.css used those tokens semantically (topbar bg, card titles, button text, footer wordmark) while text colors were often hardcoded white. Result: when data-theme="dark" was active (via localStorage toggle or hardcoded HTML attribute), text colors flipped to match backgrounds → invisible text. The site does not actively ship a dark-mode UI. Default is light mode and that is what all pages now render. Pages that intentionally style dark sections (communities/cip, brand/iconography) use their own scoped CSS, not the global token flip. If a real dark-mode is added in the future, introduce semantic tokens (--cb-page-bg, --cb-page-text, --cb-topbar-bg, --cb-topbar-text) that flip as meaningful pairs, rather than flipping the literal-color tokens. See _handoff/marketing-site-audit-2026-06-30.md for the full architecture note. */