/* ============================================================ SITE TOKENS — the one source of truth for the PUBLIC site (marketing pages, blog, guides, legal). The logged-in portal has its own file: design-tokens.css (dark-only, sage/amber); never load both on one page. Theme rule (decided 2026-08-21): · Marketing shell = graphite dark, always → put class="theme-dark" on · Reading surfaces = Apple light, graphite dark auto-variant → no class; prefers-color-scheme decides Light palette is the apple.com path: #F5F5F7 ground, flat white cards, #1D1D1F/#6E6E73 ink, #D2D2D7 hairlines, #0066CC links, Messages-authentic bubbles (#007AFF / #E9E9EB). Dark palette is FollowUpTheme graphite — never #000. ============================================================ */ :root { color-scheme: light dark; /* ── Surfaces ── */ --bg: #F5F5F7; --panel-top: #FFFFFF; --panel-mid: #FFFFFF; --panel-bot: #FFFFFF; --line: #D2D2D7; --card-shadow: 0 2px 12px rgba(0, 0, 0, 0.04); /* ── Ink ── */ --text: #1D1D1F; --muted: #6E6E73; --strong: #1D1D1F; /* ── Accents ── */ --blue: #0066CC; /* links, actions */ --amber: #7A4B00; /* notable — dark enough for light ground */ --amber-hi: #B25000; --chip-amber-bg: #FFF4DE; --green: #1E7E34; --red: #E30000; /* ── Messages bubbles (authentic iOS values) ── */ --bubble-blue: #007AFF; --bubble-recv: #E9E9EB; --bubble-thread: #FFFFFF; /* ── Type ramp (the only sizes public pages use) ── */ --font-text: -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif; --fs-hero: clamp(28px, 5vw, 40px); --fs-title: 24px; --fs-heading: 18px; --fs-body: 17px; --fs-secondary: 14.5px; --fs-caption: 12.5px; --fs-label: 12px; /* ── Shape ── */ --r-card: 14px; --r-tile: 12px; --r-thread: 18px; --r-pill: 999px; --measure: 660px; /* ── Device mimicry ── Radii that copy real hardware are NOT part of the shape language above. A phone mock's screen corner is 50px because that is the corner an iPhone has; rounding it to --r-card would make the drawing wrong, not consistent. Convention: declare them on the mock itself, prefixed `--r-device-`: .warm-phone { --r-device-frame: 46px; --r-device-screen: 33px; border-radius: var(--r-device-frame); } .warm-phone__screen { border-radius: var(--r-device-screen); } They live with the drawing rather than here, because each mock's numbers are hand-tuned to its own bezel and none derive from another — a global ladder of seven unrelated corner sizes would be a worse lie than the magic numbers it replaced. A responsive variant is then one line: redefine --r-device-frame inside the media query. The prefix is load-bearing: it is the ONLY thing that exempts a radius from the design-rubric token check (scripts/design_rubric.py), and every exemption is printed in its report. Reach for it when you are drawing a device, never to excuse a value you did not want to reconcile. */ } /* Graphite dark — auto-variant for reading surfaces */ @media (prefers-color-scheme: dark) { :root:not(.theme-light) { --bg: #0F1014; --panel-top: #1D1E20; --panel-mid: #151617; --panel-bot: #131415; --line: #2a2d37; --card-shadow: none; --text: rgba(255, 255, 255, 0.88); --muted: rgba(235, 238, 245, 0.62); --strong: #FFFFFF; --blue: #0A84FF; --amber: #FFB020; --amber-hi: #FFB347; --chip-amber-bg: transparent; --green: #30D158; --red: #FF453A; --bubble-blue: #0A84FF; --bubble-recv: #26262E; --bubble-thread: linear-gradient(180deg, var(--panel-top), var(--panel-bot)); } } /* Graphite dark — forced, for the marketing shell (class on ) */ :root.theme-dark { color-scheme: dark; --bg: #0F1014; --panel-top: #1D1E20; --panel-mid: #151617; --panel-bot: #131415; --line: #2a2d37; --card-shadow: none; --text: rgba(255, 255, 255, 0.88); --muted: rgba(235, 238, 245, 0.62); --strong: #FFFFFF; --blue: #0A84FF; --amber: #FFB020; --amber-hi: #FFB347; --chip-amber-bg: transparent; --green: #30D158; --red: #FF453A; --bubble-blue: #0A84FF; --bubble-recv: #26262E; --bubble-thread: linear-gradient(180deg, var(--panel-top), var(--panel-bot)); } /* Forced light, if a page ever needs it */ :root.theme-light { color-scheme: light; }