/* DocReadi — design tokens (Quiet Ledger v1.0) ============================================================ Single-file CSS variables. Drop into your global stylesheet (e.g. in base.html) and reference everywhere via var(--token-name). Token names are semantic — UI code should not reach for hex values directly. If you need a value the system doesn't expose, open an issue rather than hardcoding. Light mode lives in :root. Dark mode lives in two places: 1. [data-theme="dark"] for explicit user toggle (always wins) 2. @media (prefers-color-scheme: dark) for system preference when no toggle has been set */ /* === Light mode (default) ====================================== */ :root { /* --- Brand --------------------------------------------------- Three brand colours. One accent — never two cyans on the same surface. Primary carries the trust narrative; accent flags the intelligent / extracted moments only. */ --color-primary: #16324F; /* Deep Ledger Blue */ --color-primary-hover: #0E2238; /* navy darker, primary-CTA hover */ --color-secondary: #334155; /* Slate Ink */ --color-accent: #2CB7C9; /* Soft Cyan */ /* --- Surfaces ------------------------------------------------ Page background is Paper Mist (warm off-white). Cards sit one step above on pure white. Muted panels and hover states introduce a small temperature shift toward grey-blue. */ --color-surface: #F7F9FB; /* page background */ --color-surface-raised: #FFFFFF; /* cards, modals */ --color-surface-muted: #EEF2F6; /* subtle panels */ --color-surface-hover: #E5EDF3; /* hovered rows, buttons */ /* --- Text ---------------------------------------------------- */ --color-text: #0F172A; /* primary text */ --color-text-strong: #0F172A; /* alias of --color-text — modal headings, H1 */ --color-text-default: #1E293B; /* body */ --color-text-muted: #64748B; /* helper, labels, captions */ /* --- Borders ------------------------------------------------- */ --color-border: #E2E8F0; /* dividers, hairlines */ --color-border-strong: #CBD5E1; /* form-field borders */ /* --- Semantic ----------------------------------------------- Each status has a foreground (icon, text, border) and a soft surface (background fill behind the message). */ --color-success: #168A5B; --color-success-bg: #EAF7F1; --color-warning: #B7791F; --color-warning-bg: #FFF7E6; /* Viewer canvas — PDF preview surface and its toolbar chrome. Tokenised 2026-05-08 per audit Gap 5. The PDF viewer is a deliberate dark-canvas surface in BOTH light and dark themes (the document needs a calm dark frame so the page itself reads cleanly), so these values don't switch under [data-theme="dark"] — they're the same in both light and dark blocks. The light/dark switching that the rest of the kit honours doesn't apply here; the canvas is theme-agnostic by design. */ --color-viewer-bg: #111111; /* PDF canvas surround */ --color-viewer-chrome: #1F2937; /* Toolbar background (matches gray-800) */ --color-viewer-chrome-2: #374151; /* Toolbar buttons (matches gray-700) */ --color-viewer-chrome-h: #4B5563; /* Hover state (matches gray-600) */ --color-viewer-text: #DDDDDD; /* Light text on the canvas */ --color-error: #C2413D; --color-error-bg: #FDECEC; --color-info: #2F6FED; --color-info-bg: #EEF5FF; /* --- Type families ------------------------------------------- Three families. All permissively licensed (SIL OFL / Apache). See tokens-typography.css for @import + utility classes. */ --font-display: "Manrope", ui-sans-serif, system-ui, sans-serif; --font-body: "Inter", ui-sans-serif, system-ui, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace; /* --- Type scale ---------------------------------------------- */ --font-size-2xs: 11px; --font-size-xs: 12px; --font-size-sm: 14px; --font-size-base: 16px; --font-size-lg: 18px; --font-size-xl: 20px; --font-size-2xl: 24px; --font-size-3xl: 32px; --font-size-4xl: 40px; --font-size-5xl: 48px; --line-height-2xs: 14px; --line-height-xs: 16px; --line-height-sm: 20px; --line-height-base: 24px; --line-height-lg: 28px; --line-height-xl: 28px; --line-height-2xl: 32px; --line-height-3xl: 40px; --line-height-4xl: 48px; --line-height-5xl: 56px; --letter-spacing-tight: -0.025em; --letter-spacing-snug: -0.01em; --letter-spacing-normal: 0; --letter-spacing-wide: 0.04em; --letter-spacing-widest: 0.12em; /* eyebrow labels only */ /* --- Spacing (4-px grid) ------------------------------------- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; /* --- Radii --------------------------------------------------- */ --radius-button: 8px; --radius-input: 8px; --radius-card: 12px; --radius-modal: 16px; --radius-pill: 999px; /* --- Borders + shadows --------------------------------------- */ --border-hairline: 0.5px solid var(--color-border); --border-thin: 1px solid var(--color-border); --shadow-card: 0 1px 2px rgba(15, 23, 42, 0.06), 0 8px 24px rgba(15, 23, 42, 0.04); --shadow-modal: 0 4px 8px rgba(15, 23, 42, 0.08), 0 24px 48px rgba(15, 23, 42, 0.10); --shadow-sticky: 0 1px 2px rgba(15, 23, 42, 0.06), 0 8px 24px rgba(15, 23, 42, 0.04); --shadow-focus: 0 0 0 3px rgba(44, 183, 201, 0.30); /* --- Motion -------------------------------------------------- */ --duration-fast: 120ms; --duration-base: 200ms; --duration-slow: 360ms; --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1); } /* === Dark mode — explicit toggle (always wins) ================= */ [data-theme="dark"] { --color-primary: #7DB6E8; --color-primary-hover: #5C9DD7; /* primary lighter cousin for dark-mode hover */ --color-secondary: #CBD5E1; --color-accent: #4DD4E4; --color-surface: #07111F; --color-surface-raised: #0B1726; --color-surface-muted: #102033; --color-surface-hover: #152941; --color-text: #F8FAFC; --color-text-strong: #F8FAFC; --color-text-default: #CBD5E1; --color-text-muted: #94A3B8; --color-border: #1E293B; --color-border-strong: #334155; --color-success: #3FB07F; --color-success-bg: #0F2A20; /* Warning + error dialled from the original kit values (warning #E5A93A, error #E47471) per brand-guardian audit 2026-05-08: against the deep-navy dark surface those tones read as a neon pop more than a calm flag. New values keep WCAG AA on body text (warning 6.8:1, error 6.1:1) but read as "needs attention" / "this is broken" rather than "celebratory amber" / "rosé pink". -bg tints unchanged — they were already well-judged. */ --color-warning: #CC9430; --color-warning-bg: #2B210A; --color-error: #D96A66; --color-error-bg: #2B1414; --color-info: #7DA9F0; --color-info-bg: #0F1E33; --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.40), 0 8px 24px rgba(0, 0, 0, 0.30); --shadow-modal: 0 4px 8px rgba(0, 0, 0, 0.50), 0 24px 48px rgba(0, 0, 0, 0.45); --shadow-sticky: 0 1px 2px rgba(0, 0, 0, 0.40), 0 8px 24px rgba(0, 0, 0, 0.30); --shadow-focus: 0 0 0 3px rgba(77, 212, 228, 0.40); } /* === Dark mode — system preference (only when no manual override) */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --color-primary: #7DB6E8; --color-primary-hover: #5C9DD7; --color-secondary: #CBD5E1; --color-accent: #4DD4E4; --color-surface: #07111F; --color-surface-raised: #0B1726; --color-surface-muted: #102033; --color-surface-hover: #152941; --color-text: #F8FAFC; --color-text-strong: #F8FAFC; --color-text-default: #CBD5E1; --color-text-muted: #94A3B8; --color-border: #1E293B; --color-border-strong: #334155; --color-success: #3FB07F; --color-success-bg: #0F2A20; /* Mirrors the [data-theme="dark"] block above — see rationale there. */ --color-warning: #CC9430; --color-warning-bg: #2B210A; --color-error: #D96A66; --color-error-bg: #2B1414; --color-info: #7DA9F0; --color-info-bg: #0F1E33; --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.40), 0 8px 24px rgba(0, 0, 0, 0.30); --shadow-modal: 0 4px 8px rgba(0, 0, 0, 0.50), 0 24px 48px rgba(0, 0, 0, 0.45); --shadow-sticky: 0 1px 2px rgba(0, 0, 0, 0.40), 0 8px 24px rgba(0, 0, 0, 0.30); --shadow-focus: 0 0 0 3px rgba(77, 212, 228, 0.40); } }