/* ============================================================ Censum — Brand Tokens From Claude Design handoff bundle `design_handoff_censum_brand` Imported 2026-04-24 by cal-claude from https://api.anthropic.com/v1/design/h/FOY-rW-QSmaWhU5kon_EHQ USAGE ----- Include once at the top of after font preconnects: Then reference tokens with CSS custom props: color: var(--ink); background: var(--paper); font-family: var(--font-sans); ============================================================ */ /* ---- Fonts ------------------------------------------------- */ /* IBM Plex Sans (UI + wordmark), Plex Mono (civic labels), Plex Serif (display numerals on reports). */ @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400;1,500&family=IBM+Plex+Mono:wght@400;500&family=IBM+Plex+Serif:wght@300;400;500&display=swap'); :root { /* ---- Colors (OKLCH w/ sRGB fallback via @supports) ----- */ --ochre: #c08a3e; /* the brand atom — use ONCE per screen */ --ink: #26241f; /* primary text / dark sections */ --ink-80: #3f3c36; /* body text */ --ink-60: #6e6b63; /* secondary / meta / labels */ --paper: #f8f6f1; /* warm off-white page bg */ --card: #f1eee6; /* subtle card surface */ --rule: #d9d4c7; /* hairline borders / dividers */ /* ---- Typography --------------------------------------- */ --font-sans: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Consolas, monospace; --font-serif: 'IBM Plex Serif', Georgia, 'Times New Roman', serif; /* ---- Rules & emphasis -------------------------------- */ --rule-hairline: 1px solid var(--rule); --rule-emphasis: 2px solid var(--ink); /* ---- Shadow (document-style, not SaaS) --------------- */ /* Single hard offset, no blur. Reinforces document aesthetic. */ --shadow-card: 0 2px 0 0 #ebe7dc; } /* ---- OKLCH upgrade when supported ------------------------- */ @supports (color: oklch(0.65 0.12 70)) { :root { --ochre: oklch(0.65 0.12 70); --ink: oklch(0.18 0.01 60); --ink-80: oklch(0.28 0.01 60); --ink-60: oklch(0.48 0.01 60); --paper: oklch(0.98 0.005 85); --card: oklch(0.96 0.006 85); --rule: oklch(0.88 0.008 85); --shadow-card: 0 2px 0 0 oklch(0.92 0.005 85); } } /* ============================================================ Utility classes — drop-in helpers, no framework required ============================================================ */ /* ---- Kicker (uppercase Plex Mono, wide-tracked) ---------- */ .cn-kicker { font-family: var(--font-mono); font-weight: 400; font-size: 11px; letter-spacing: 0.20em; text-transform: uppercase; color: var(--ink-60); line-height: 1; } .cn-kicker--tight { letter-spacing: 0.16em; } .cn-kicker--loose { letter-spacing: 0.32em; } /* ---- Display numeral (stats) ----------------------------- */ .cn-numeral { font-family: var(--font-serif); font-weight: 300; letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums; } /* ---- Hairline divider ------------------------------------ */ .cn-hairline { border: 0; border-top: var(--rule-hairline); margin: 0; } .cn-rule { border: 0; border-top: var(--rule-emphasis); margin: 0; } /* ---- Wordmark (canonical) -------------------------------- */ /* The canonical mark. HTML, not SVG, so the ochre dot tucks up tight against the final "m" without math. Size scales via font-size; the dot scales from it via em units. */ .cn-wordmark { display: inline-flex; align-items: baseline; font-family: var(--font-sans); font-weight: 500; font-size: 1em; line-height: 1; letter-spacing: -0.03em; color: var(--ink); font-style: normal; white-space: nowrap; } .cn-wordmark::after { content: ''; display: inline-block; width: 0.16em; height: 0.16em; border-radius: 50%; background: var(--ochre); margin-left: 0.035em; transform: translateY(-0.02em); /* Decorative — don't read aloud */ speak: none; } .cn-wordmark--reversed { color: var(--paper); } .cn-wordmark--mono { } .cn-wordmark--mono::after { background: var(--ink); } .cn-wordmark--bold { font-weight: 700; letter-spacing: -0.045em; } .cn-wordmark--bold::after { width: 0.22em; height: 0.22em; margin-left: 0.05em; } /* ---- No rounded corners — hard reset ---------------------- */ /* The brand deliberately avoids border-radius. Scope this to pages that opt in via so we don't yank existing rounded UI on legacy pages. */ .cn-document button, .cn-document input, .cn-document textarea, .cn-document select, .cn-document .cn-card { border-radius: 0 !important; } /* ---- Card (document-style) ------------------------------- */ .cn-card { background: var(--paper); border: var(--rule-hairline); box-shadow: var(--shadow-card); padding: 20px; } .cn-card--dark { background: var(--ink); color: var(--paper); border-color: var(--ink); box-shadow: none; } /* ---- Button (square-edge, ink-filled) -------------------- */ .cn-btn { display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-sans); font-weight: 500; font-size: 14px; letter-spacing: -0.005em; padding: 0.75rem 1.25rem; background: var(--ink); color: var(--paper); border: 0; border-radius: 0; cursor: pointer; transition: opacity 120ms ease; text-decoration: none; } .cn-btn:hover { opacity: 0.9; text-decoration: none; } .cn-btn--ghost { background: transparent; color: var(--ink); border: 1px solid var(--ink); } .cn-btn--link { background: transparent; color: var(--ink); padding: 0; border: 0; text-decoration: underline; text-underline-offset: 3px; } /* ---- Ochre discipline guard (dev-only) ------------------- */ /* Flip on with `?debug_brand=1` in dev env to visually audit any surface that is painted ochre. There should be exactly one per major screen moment. */ body.cn-debug [style*="var(--ochre)"], body.cn-debug .cn-wordmark::after, body.cn-debug [data-ochre] { outline: 2px dashed magenta; outline-offset: 2px; } /* ---- Motion discipline ----------------------------------- */ /* Brand spec: 120ms transitions; no transforms; fades only. Global override for anything that opts into `.cn-document`. */ .cn-document * { transition-duration: 120ms; transition-timing-function: ease-out; } @media (prefers-reduced-motion: reduce) { .cn-document * { transition: none !important; animation: none !important; } }