/* ============================================================================= 1891 — Shared design tokens ============================================================================= NAMESPACE RULE (read this first): - EVERY shared, cross-project token uses the `--c-*` prefix. `c` = "common." It's the most generic of the three prefixes already in use in the workspace (`--bloom`, `--psa-*`, `--c-*`), and it doesn't collide with any existing project's tokens. - EVERY project-specific token uses the `---*` prefix: --mowl-tree-*, --psa-*, --ftd-*, --1891-arena-*, --1891-* - A project that wants to *override* a shared token does so by setting it inside `:root[data-project=""]` in the project's own theme file -- never by editing this file. When to add a token here: only when a value will be reused across at least TWO projects with the SAME meaning. Otherwise keep it project-local. When in doubt, leave it out -- this file should grow slowly. Source extraction notes (for the curious): - palette is a generic neutral set; each project picks its own brand color via `--c-bloom` overrides - spacing scale is the 4px grid common to mowl-tree + msd-psa + FDT - type scale is a 1.25 (major third) modular scale ============================================================================= */ :root { /* ---- Palette: neutrals ------------------------------------------------- */ --c-ink: #111418; /* primary text */ --c-ink-soft: #3a3f47; /* secondary text */ --c-fog: #6b7280; /* tertiary text, captions */ --c-line: #e4e7eb; /* hairlines, dividers */ --c-paper: #ffffff; /* default surface */ --c-paper-warm: #faf8f4; /* alternate surface (cards, sections) */ /* ---- Palette: brand slots (override per project) ----------------------- */ --c-bloom: #8a2843; /* primary brand color (rose default) */ --c-bloom-soft: #c46b85; /* lighter brand for hovers, accents */ --c-accent: #d4a017; /* secondary accent */ /* ---- Palette: semantic ------------------------------------------------- */ --c-ok: #1f7a3a; --c-warn: #b87b1a; --c-err: #b3261e; --c-info: #1a5f9c; /* ---- Spacing: 4px grid ------------------------------------------------- */ --c-space-0: 0; --c-space-1: 4px; --c-space-2: 8px; --c-space-3: 12px; --c-space-4: 16px; --c-space-5: 24px; --c-space-6: 32px; --c-space-7: 48px; --c-space-8: 64px; --c-space-9: 96px; /* ---- Type: stack + scale (1.25 modular) -------------------------------- */ --c-font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --c-font-serif: Georgia, "Iowan Old Style", "Charter", serif; --c-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --c-text-xs: 0.75rem; /* 12px */ --c-text-sm: 0.875rem; /* 14px */ --c-text-md: 1rem; /* 16px -- base */ --c-text-lg: 1.25rem; /* 20px */ --c-text-xl: 1.5625rem; /* 25px */ --c-text-2xl: 1.953rem; /* ~31px */ --c-text-3xl: 2.441rem; /* ~39px */ --c-text-4xl: 3.052rem; /* ~49px */ --c-leading-tight: 1.2; --c-leading-normal: 1.5; --c-leading-loose: 1.7; /* ---- Radius + elevation ----------------------------------------------- */ --c-radius-sm: 4px; --c-radius-md: 8px; --c-radius-lg: 16px; --c-radius-pill: 999px; --c-shadow-sm: 0 1px 2px rgba(0,0,0,0.06); --c-shadow-md: 0 4px 12px rgba(0,0,0,0.08); --c-shadow-lg: 0 12px 32px rgba(0,0,0,0.12); /* ---- Layout ----------------------------------------------------------- */ --c-container-max: 1100px; --c-container-pad: var(--c-space-5); /* ---- Motion ----------------------------------------------------------- */ --c-ease-out: cubic-bezier(0.16, 1, 0.3, 1); --c-ease-in: cubic-bezier(0.4, 0, 1, 1); --c-duration-fast: 120ms; --c-duration-normal: 220ms; --c-duration-slow: 400ms; /* ========================================================================= Umbrella tokens -- added 2026-05-18 by Phase 1.5 cleanup ========================================================================= These tokens were previously in `shared/css/tokens.css` (the umbrella site's master palette). That file is now retired and merged here so there's one source of truth for the whole workspace. The umbrella site consumes these via `/shared/design-system/tokens.css`; godview and the other Cloudflare surfaces already do. Where a name from the umbrella file collided with an existing token above, the existing design-system value is kept (it's production). Collisions (kept design-system value, flagged): --c-ink, --c-ink-soft, --c-paper, --c-paper-warm --c-ok, --c-warn, --c-err, --c-info --c-font-sans, --c-font-serif, --c-font-mono --c-radius-md, --c-radius-lg --c-shadow-sm, --c-shadow-md, --c-shadow-lg --c-container-max --c-leading-tight --c-text-xs, --c-text-sm The umbrella site's "warm paper" palette (navy/brass/cream) lives in the new tokens below as additive options. To opt into the umbrella's warmer surface, a page can set `:root[data-theme="umbrella"]` (TBD). Namespace stays `--c-*`. Per-track tints use `--c-track--*`. ========================================================================= */ /* ---- Master palette: brand spine (Order Navy) ------------------------- */ --c-navy: #0E2742; /* Order Navy. Not black; not midnight; "ink on cream." */ --c-navy-soft: #1B3A5B; /* navy at 75% -- only for hover on navy surfaces */ --c-navy-deep: #08182A; /* navy at 115% -- heritage strip, footers on paper */ /* ---- Master palette: brand accent (Brass Gavel) ----------------------- */ --c-brass: #B08838; /* Brass Gavel -- desaturated, not goldenrod */ --c-brass-soft: #C9A461; /* lighter brass for hovers, focus rings on navy */ --c-brass-deep: #8C6A26; /* darker brass for pressed state, brass-on-paper text */ /* ---- Master palette: extra surfaces ----------------------------------- */ --c-paper-cool: #FAF8F2; /* lighter paper for content cards */ --c-white: #FFFFFF; /* card surfaces on paper */ /* ---- Master palette: ink scale + structural neutrals ------------------ */ --c-steel: #5B6770; /* structural lines, muted UI, supporting copy */ --c-pewter: #9AA0A6; /* disabled, placeholder */ --c-mist: #EEEBE3; /* section dividers, subtle bands */ --c-linen: #DCD8CE; /* hairlines, card borders on paper */ /* ---- Signal colours: soft variants ------------------------------------ */ --c-ok-soft: #4E8E6E; --c-warn-soft: #C28846; --c-err-soft: #A85050; --c-info-soft: #4F8AAF; /* ---- Track tints ------------------------------------------------------ Scoped per section. Never global. Never body text. A section sets `data-track=""` on the section root and the page-local CSS reads `--c-track-tint` (resolved below) so generic components stay generic. */ /* Imagination Town -- Marigold (kids-museum warmth, brass-family) */ --c-track-iat-tint: #E8A93D; --c-track-iat-tint-hover: #F4BC55; --c-track-iat-on-tint: #1A1F26; /* text on Marigold; navy on warm */ /* Heart Space -- Rose Quartz (contemplative warm muted pink) */ --c-track-heart-tint: #B86A78; --c-track-heart-tint-hover: #CC8694; --c-track-heart-on-tint: #FFFFFF; /* text on Rose; white reads cleanly */ /* Game Lab -- Arcade Cyan (cool, satisfying; "play" not neon) */ --c-track-game-tint: #2E7AA0; --c-track-game-tint-hover: #4593BC; --c-track-game-on-tint: #FFFFFF; /* text on Cyan; white */ /* ---- Semantic: "this is what broke" ---------------------------------- Muted red used to mark hostile-design beats inside a demo's Bad-design pass (Pharmacy §18.9 debrief annotations, future analogues in Drive-Thru / ATM / Elevator). Reusable so the "broken affordance" colour reads the same across the catalog. */ --c-broken-red: #A3463C; --c-broken-red-soft: rgba(163, 70, 60, 0.16); /* Default resolved track tint -- overridden inside a section that sets `data-track="imagination-town"` etc. Outside any track, falls back to brass so generic tile components still work. */ --c-track-tint: var(--c-brass); --c-track-tint-hover: var(--c-brass-soft); --c-track-on-tint: var(--c-paper); /* ---- Type scale: extended sizes -------------------------------------- The design-system base scale above is kept (xs/sm/md/lg/...). The umbrella adds 2xs, base, 5xl, hero, and hero-l for marketing pages. Where umbrella wanted finer body control, those names map to the existing design-system tokens (e.g. body=md). */ --c-text-2xs: 0.75rem; /* 12px -- JetBrains mono eyebrows, footnotes */ --c-text-base: 1.125rem; /* 18px -- long-form body paragraph (locked) */ --c-text-5xl: 3.815rem; /* ~61px -- section opener */ --c-text-hero: 4.0rem; /* 64px -- homepage h1 (locked) */ --c-text-hero-l:4.75rem; /* 76px -- full-bleed hero on wide */ /* ---- Line height: extended ------------------------------------------- */ --c-leading-display: 1.04; /* hero */ --c-leading-snug: 1.3; /* h4, UI controls */ --c-leading-relaxed: 1.6; /* long-form body -- locked at 1.6 */ /* ---- Letter-spacing (tracking) -------------------------------------- */ --c-track-display: -0.02em; --c-track-headline: -0.01em; --c-track-body: 0em; --c-track-caps: 0.08em; /* mono eyebrows, all-caps labels */ /* ---- Weight ---------------------------------------------------------- */ --c-weight-regular: 400; --c-weight-medium: 500; --c-weight-semibold: 600; --c-weight-bold: 700; /* ---- Section padding tiers (extends spacing) ------------------------ */ --c-section-pad-y: var(--c-space-9); /* 96px desktop */ --c-section-pad-x: var(--c-space-5); /* 24px gutter desktop */ /* ---- Extra layout caps ---------------------------------------------- */ --c-container-wide: 1440px; /* hero may extend to this */ --c-prose-max: 680px; /* long-form prose cap */ /* ---- Extra radius + elevation --------------------------------------- */ --c-radius-xl: 24px; --c-shadow-hover: 0 8px 24px rgba(14, 24, 42, 0.10); /* ---- Motion: locked durations + Material standard easing ------------ The design-system motion tokens above stay (--c-duration-*). These umbrella names exist for pages that follow the visual-refresh plan verbatim. Reduced-motion overrides null both sets further down. */ --c-dur-instant: 120ms; /* focus rings, smallest state confirms */ --c-dur-fast: 180ms; /* hover state changes -- locked */ --c-dur-normal: 240ms; /* content swaps, modal opens -- locked */ --c-dur-slow: 360ms; /* high-importance reveals -- locked */ --c-ease-standard: cubic-bezier(0.4, 0, 0.2, 1); /* Material standard */ /* ---- Focus + selection --------------------------------------------- */ --c-focus-ring-color: var(--c-brass); --c-focus-ring-width: 2px; --c-focus-ring-offset: 2px; /* Selection paints navy-on-paper-warm so it never reads as a glow */ --c-selection-bg: var(--c-paper-warm); --c-selection-fg: var(--c-navy); } /* --------------------------------------------------------------------------- Track-aware sections -- a section sets `data-track` and the generic token resolvers pick up the right tint without page-local CSS. --------------------------------------------------------------------------- */ [data-track="imagination-town"] { --c-track-tint: var(--c-track-iat-tint); --c-track-tint-hover: var(--c-track-iat-tint-hover); --c-track-on-tint: var(--c-track-iat-on-tint); } [data-track="heart-space"] { --c-track-tint: var(--c-track-heart-tint); --c-track-tint-hover: var(--c-track-heart-tint-hover); --c-track-on-tint: var(--c-track-heart-on-tint); } [data-track="game-lab"] { --c-track-tint: var(--c-track-game-tint); --c-track-tint-hover: var(--c-track-game-tint-hover); --c-track-on-tint: var(--c-track-game-on-tint); } /* --------------------------------------------------------------------------- Universal focus ring -- applied with :focus-visible only so mouse users don't see the ring on click. Brass on every background by spec. --------------------------------------------------------------------------- */ :focus-visible { outline: var(--c-focus-ring-width) solid var(--c-focus-ring-color); outline-offset: var(--c-focus-ring-offset); } ::selection { background: var(--c-selection-bg); color: var(--c-selection-fg); } /* ---- Dark-mode-aware overrides (opt-in via prefers-color-scheme) --------- Projects that want dark mode set and inherit these. Otherwise the light palette above is used. The umbrella's warm-paper dark adaptation extends the same opt-in: it adds entries for --c-paper-cool, --c-white, --c-steel, --c-pewter, --c-mist, --c-linen so the navy/brass paper system also flips cleanly. */ @media (prefers-color-scheme: dark) { :root[data-theme="auto"] { --c-ink: #f1f3f5; --c-ink-soft: #c2c8d0; --c-fog: #8b939c; --c-line: #2a2f36; --c-paper: #0e1014; --c-paper-warm: #15181d; /* Umbrella additions */ --c-paper-cool: #182230; --c-white: #1A2434; --c-steel: #8B939C; --c-pewter: #5E6671; --c-mist: #1F2A38; --c-linen: #2A3645; } } /* ---- Reduced motion --------------------------------------------------- Nulls out BOTH motion vocabularies (--c-duration-* design-system names and --c-dur-* umbrella names) plus a belt-and-braces sweep on `*` so anything that didn't read a token still freezes. */ @media (prefers-reduced-motion: reduce) { :root { --c-duration-fast: 0ms; --c-duration-normal: 0ms; --c-duration-slow: 0ms; --c-dur-instant: 0ms; --c-dur-fast: 0ms; --c-dur-normal: 0ms; --c-dur-slow: 0ms; } *, *::before, *::after { animation-duration: 0ms !important; animation-iteration-count: 1 !important; transition-duration: 0ms !important; scroll-behavior: auto !important; } }