/* * ScriptHooks Design Tokens — Typography Layer * * Phase B of the scripthooks-design migration lands TYPOGRAPHY ONLY across * all ScriptHooks surfaces. Color, radius, shadow, and component tokens are * declared here but intentionally not yet enforced on existing UIs. Each * surface retains its current palette until a dedicated color migration * (Phase C and beyond). * * What's universal after Phase B: * - Fraunces / Inter / Geist Mono loaded everywhere * - `--sh-font-display`, `--sh-font-body`, `--sh-font-meta` available * - `.sh-font-display`, `.sh-font-body`, `.sh-font-meta` utility classes * * What's declared but latent (do NOT apply broadly yet): * - `--sh-paper` / `--sh-soft` / `--sh-ink` / `--sh-muted` / `--sh-rule` * / `--sh-accent` — for use by the Scripty Logbook and other * purpose-built light surfaces; existing dark surfaces leave them alone. * * See .claude/skills/scripthooks-design/SKILL.md for the full system and * reference-mockup.html for the ground-truth Logbook render. * * Load order: this stylesheet MUST be the first stylesheet referenced in * each HTML so downstream sheets can consume token variables. */ @import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Inter:wght@400;500;600;700&family=Geist+Mono:wght@400;500&display=swap'); :root { /* ---------------------------------------------------------- * Typography — enforced universally in Phase B * ---------------------------------------------------------- */ --sh-font-display: "Fraunces", Georgia, Cambria, "Times New Roman", serif; --sh-font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --sh-font-meta: "Geist Mono", "SF Mono", Menlo, Consolas, monospace; /* ---------------------------------------------------------- * Color palette — latent. Declared so light-mode Scripty * surfaces (Logbook, weekly email) can consume them today; * existing dark/SaaS surfaces keep their current palette until * a scoped color migration lands for each surface. * ---------------------------------------------------------- */ --sh-paper: #FAF8F3; --sh-soft: #F2EEE4; --sh-ink: #1A1A1A; --sh-muted: #6B6B66; --sh-rule: #E8E3D8; --sh-accent: #8A6E3C; /* ---------------------------------------------------------- * Border radii — latent primitives for future migration. * ---------------------------------------------------------- */ --sh-radius-standard: 4px; --sh-radius-card: 8px; } /* ---------------------------------------------------------- * Dark theme — Phase C Step 1a (activated 2026-04-23) * * Palette derived from the existing cinematic-design.css tokens * (void/charcoal/graphite/cloud/zinc/slate-dark) which are already * rendering on every main product page. Not an inverted paper * palette — a separately-designed dark palette that matches what * users currently experience on dark surfaces, mapped into the * scripthooks-design semantic structure. * * Accent: lifted brass (#D4A574) instead of cinematic's pure-white * glow. This carries the warm-brass personality from light mode * into dark so both themes read as the same brand. Confirmed- * status badges, active nav indicators, and accent meta labels * will render in this warm-gold tone rather than monochrome white. * * Activation is lazy: this block only takes effect when an element * has data-theme="dark" on an ancestor (typically ). With no * toggle wired yet (Phase C Step 1b), the default remains light. * Set data-theme="dark" manually via devtools to preview. * ---------------------------------------------------------- */ [data-theme="dark"] { color-scheme: dark; --sh-paper: #0a0a0e; /* cinematic --charcoal — primary dark background */ --sh-soft: #1a1a20; /* cinematic --graphite — elevated surfaces, email headers */ --sh-ink: #e0e0e4; /* cinematic --cloud — body text, headlines (warm off-white) */ --sh-muted: #9a9aa4; /* cinematic --zinc — secondary text, timestamps */ --sh-rule: #222228; /* cinematic --slate-dark — hairline dividers on dark */ --sh-accent: #D4A574; /* lifted brass — warm continuity with light mode */ } /* ============================================================ */ /* Global typography behavior — applies to every page */ /* ============================================================ */ /* * Enable optical sizing for any variable font that exposes an `opsz` axis * (Fraunces, etc.). No-op for non-variable fonts like Inter and Geist Mono. * Applied body-wide so existing headings rendered via `font-family: * var(--sh-font-display)` pick up the display-tuned cut at large sizes * without having to add the `.sh-font-display` utility class everywhere. */ body { font-optical-sizing: auto; } /* ============================================================ */ /* Typography utilities — safe to use on any surface */ /* ============================================================ */ .sh-font-display { font-family: var(--sh-font-display); font-optical-sizing: auto; letter-spacing: -0.02em; } .sh-font-body { font-family: var(--sh-font-body); font-feature-settings: "cv11", "ss01", "ss03"; } .sh-font-meta { font-family: var(--sh-font-meta); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; } /* ============================================================ */ /* Color-dependent utilities — RESERVED for Phase C */ /* ============================================================ */ /* * The following utilities depend on light-mode color tokens and are * intentionally NOT shipped in Phase B. They are documented here so * that when a scoped color migration lands for a given surface, these * classes can be uncommented (or moved to a surface-local stylesheet) * and applied together. * * .sh-btn-primary — ink-on-paper button (inverts on dark surfaces) * .sh-btn-ghost — muted-text underline action * .sh-badge-confirmed — accent-on-tinted status * .sh-badge-active — muted-on-soft status * .sh-rule / .sh-rule-top / .sh-rule-bottom — hairline dividers * .sh-muted / .sh-accent — color setters * .sh-section-header — layout-only; can ship sooner if needed * * See .claude/skills/scripthooks-design/SKILL.md for CSS definitions * when Phase C lands these. */