/* ============================================================
ui-tokens.css — MaxCV "Paper & Ink" design tokens.
Source of truth: docs/design/paper-ink/SPEC.md + DesignSystem artboard.
Load order (every page, marketing + app):
…then the surface stylesheet (ui-marketing.css / ui-app.css / ui-content.css).
/ui-theme.js (parser-blocking) goes before all of them, so a saved
Light/Dark choice sets before the first paint.
Naming: every token is --ui-*. Dark mode follows the OS; an explicit
[data-theme] on wins in both directions (light opt-out, dark force).
The composer band (--ui-band*) is dark in BOTH themes by design.
The legacy --rd-* / shared.css variable names are gone: every stylesheet
and inline style reads --ui-* directly (guarded by tests/css-contract).
============================================================ */
:root {
/* ── Colour (light) ── */
--ui-paper: #F6F5F1; /* page ground */
--ui-surface: #FFFFFF; /* cards, header, menus */
--ui-sunken: #EFEEE8; /* tracks, chips, segmented controls */
--ui-ink: #14201B; /* text */
--ui-ink-2: #3D4944; /* secondary text */
--ui-ink-3: #5E6A65; /* captions (≥4.5:1 on paper) */
--ui-line: #E4E2DA; /* dividers */
--ui-line-strong: #CFCCC2; /* inputs, secondary buttons */
--ui-accent: #1B7F4B; /* primary buttons, links */
--ui-accent-hover: #146A3E;
--ui-accent-soft: #E4F2E9; /* ready, matched, focus ring */
--ui-accent-ink: #0E5A32; /* text on accent-soft, eyebrows */
--ui-on-accent: #FFFFFF; /* text on accent buttons */
--ui-amber: #A1510A; /* needs review (text) */
--ui-amber-soft: #FCF0DB;
--ui-red: #B42318; /* errors, not a fit */
--ui-red-soft: #FCEBE9;
--ui-score-before: #9FB3A8; /* "before" segment of the score bar */
--ui-avatar-ring: #CFE6D8; /* open account-menu trigger ring */
/* Dark composer band / footer CTA — same values in both themes. */
--ui-band: #111A16;
--ui-band-2: #1C2721;
--ui-band-line: #2C3832;
--ui-band-text: #E9EEEA;
--ui-band-muted: #A7B3AC;
--ui-band-link: #9FD9B6; /* links / toast actions on ink grounds */
--ui-toast-bg: #14201B;
--ui-toast-text: #FFFFFF;
--ui-toast-error-dot: #F2766A;
/* ── Type ── */
--ui-serif: 'Instrument Serif', Georgia, 'Times New Roman', serif;
--ui-sans: 'Geist', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
--ui-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
--ui-fs-hero: clamp(44px, 6vw, 76px);
--ui-fs-section: clamp(32px, 4vw, 48px);
--ui-fs-title: clamp(30px, 3vw, 40px);
--ui-fs-card-title: 18px;
--ui-fs-body: 16px;
--ui-fs-ui: 14px;
--ui-fs-small: 13px;
--ui-fs-label: 12px;
--ui-lh-body: 1.55;
--ui-tracking-display: -0.01em;
--ui-tracking-label: .08em;
/* ── Shape ── */
--ui-radius-card: 12px;
--ui-radius-control: 10px;
--ui-radius-modal: 16px;
--ui-radius-menu: 14px;
--ui-radius-pill: 999px;
--ui-shadow-card: 0 1px 2px rgba(20, 32, 27, .05);
--ui-shadow-overlay: 0 16px 40px rgba(20, 32, 27, .14);
--ui-shadow-segment: 0 1px 2px rgba(20, 32, 27, .08);
--ui-focus-ring: 0 0 0 3px var(--ui-accent-soft);
/* ── Space (4-pt scale) ── */
--ui-space-1: 4px;
--ui-space-2: 8px;
--ui-space-3: 12px;
--ui-space-4: 16px;
--ui-space-5: 24px;
--ui-space-6: 32px;
--ui-space-7: 48px;
--ui-space-8: 64px;
--ui-space-9: 96px;
/* ── Layout ── */
--ui-container: 1200px;
--ui-gutter: 32px;
--ui-header-h: 64px;
--ui-app-footer-h: 48px;
--ui-tabbar-h: 64px;
--ui-control-h: 44px;
--ui-control-h-sm: 36px;
--ui-icon-stroke: 1.75;
color-scheme: light;
}
@media (max-width: 600px) {
:root { --ui-gutter: 16px; --ui-header-h: 56px; }
}
/* ── Dark palette (DesignSystem "Dark mode · follows OS, same token names") ──
Board values: paper #121916, surface #18211C, ink #E9EEEA, line #2A3530,
accent #3FA46F, accent-soft #173424; the rest is derived to keep AA
contrast. White on #3FA46F is only ~3:1, so --ui-on-accent turns dark. */
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--ui-paper: #121916;
--ui-surface: #18211C;
--ui-sunken: #1F2A24;
--ui-ink: #E9EEEA;
--ui-ink-2: #C4CEC8;
--ui-ink-3: #A7B3AC;
--ui-line: #2A3530;
--ui-line-strong: #3B4842;
--ui-accent: #3FA46F;
--ui-accent-hover: #55B783;
--ui-accent-soft: #173424;
--ui-accent-ink: #8FD3AE;
--ui-on-accent: #07140D;
--ui-amber: #EBA35C;
--ui-amber-soft: #3A2A15;
--ui-red: #F2766A;
--ui-red-soft: #3E1D1A;
--ui-score-before: #5D7268;
--ui-avatar-ring: #24503A;
--ui-band: #0C120F;
--ui-band-2: #18211C;
--ui-band-line: #2C3832;
--ui-toast-bg: #E9EEEA;
--ui-toast-text: #14201B;
--ui-shadow-card: 0 1px 2px rgba(0, 0, 0, .35);
--ui-shadow-overlay: 0 16px 40px rgba(0, 0, 0, .5);
--ui-shadow-segment: 0 1px 2px rgba(0, 0, 0, .4);
color-scheme: dark;
}
}
:root[data-theme="dark"] {
--ui-paper: #121916;
--ui-surface: #18211C;
--ui-sunken: #1F2A24;
--ui-ink: #E9EEEA;
--ui-ink-2: #C4CEC8;
--ui-ink-3: #A7B3AC;
--ui-line: #2A3530;
--ui-line-strong: #3B4842;
--ui-accent: #3FA46F;
--ui-accent-hover: #55B783;
--ui-accent-soft: #173424;
--ui-accent-ink: #8FD3AE;
--ui-on-accent: #07140D;
--ui-amber: #EBA35C;
--ui-amber-soft: #3A2A15;
--ui-red: #F2766A;
--ui-red-soft: #3E1D1A;
--ui-score-before: #5D7268;
--ui-avatar-ring: #24503A;
--ui-band: #0C120F;
--ui-band-2: #18211C;
--ui-band-line: #2C3832;
--ui-toast-bg: #E9EEEA;
--ui-toast-text: #14201B;
--ui-shadow-card: 0 1px 2px rgba(0, 0, 0, .35);
--ui-shadow-overlay: 0 16px 40px rgba(0, 0, 0, .5);
--ui-shadow-segment: 0 1px 2px rgba(0, 0, 0, .4);
color-scheme: dark;
}