/* main.css — Ledger design-system tokens, reset, fonts, and base type. * Shared source of truth for the CaliberUtilities portfolio (suite-wide). * Copy verbatim into each app's frontend/css/ at build — do NOT edit per-app copies. * Edit here; copy propagates at build or by symlink. */ /* ── Fonts (bundled locally — no CDN calls; offline-first promise) ─── */ @font-face { font-family: 'Source Sans 3'; font-weight: 400; font-style: normal; font-display: swap; src: url('../fonts/source-sans-3-400.woff2') format('woff2'); } @font-face { font-family: 'Source Sans 3'; font-weight: 600; font-style: normal; font-display: swap; src: url('../fonts/source-sans-3-600.woff2') format('woff2'); } @font-face { font-family: 'Source Sans 3'; font-weight: 400; font-style: italic; font-display: swap; src: url('../fonts/source-sans-3-400i.woff2') format('woff2'); } @font-face { font-family: 'Source Serif 4'; font-weight: 600; font-style: normal; font-display: swap; src: url('../fonts/source-serif-4-600.woff2') format('woff2'); } /* ── Design tokens (Paper Light default) ─────────────────────────────── */ :root { /* Backgrounds */ --bg-base: #FBF8F1; /* app canvas — warm paper */ --bg-surface: #FFFEFB; /* cards, panels, work area */ --bg-subtle: #F2ECDF; /* striped rows, inactive areas */ --bg-elevated: #FFFFFF; /* inputs, popovers, raised cards */ --bg-border: #E2DAC9; /* hairline dividers, input borders */ --bg-border-strong: #CCC0A8; /* stronger separators */ /* Text */ --text-primary: #2B2620; /* ink — body & headings */ --text-secondary: #6A6155; /* labels, secondary rows */ --text-muted: #7A7062; /* timestamps, hints, placeholders */ --text-on-accent: #FFFFFF; /* text on filled accent */ /* Accent (deep teal — calm, trustworthy) */ --accent: #1D6E66; /* primary actions, active step, links */ --accent-strong: #14534C; /* pressed/active fill */ --accent-bright: #2A867C; /* hover on accent elements only */ --accent-soft: #E6F0EE; /* selected-row tint, soft fills */ /* Status */ --danger: #B23A2E; --danger-soft: #F7E7E4; --success: #2B7549; --success-soft: #E6F1EA; --warning: #955E1E; --warning-soft: #F8EEDD; --info: #2F6FA8; --info-soft: #E6EEF6; /* Comparison semantics (A = master/keep, B = incoming) */ --compare-a: #1D6E66; --compare-a-soft: #E6F0EE; --compare-b: #2F6FA8; --compare-b-soft: #E6EEF6; /* Typography */ --font-body: 'Source Sans 3', -apple-system, 'Segoe UI', sans-serif; --font-display: 'Source Serif 4', Georgia, serif; --font-mono: ui-monospace, 'Cascadia Code', Consolas, monospace; --font-size-xs: 13px; --font-size-sm: 14px; --font-size-base: 16px; --font-size-md: 18px; --font-size-lg: 22px; --font-size-xl: 28px; --font-size-2xl: 36px; /* Spacing (4px grid) */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; /* Radius */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 14px; /* Shadows (neutral ink-alpha — never tinted with accent) */ --shadow-sm: 0 1px 2px rgba(43,38,32,0.06); --shadow-md: 0 4px 16px rgba(43,38,32,0.10); --shadow-lg: 0 16px 48px rgba(43,38,32,0.16); /* Motion (respect reduced-motion below) */ --motion-fast: 100ms ease-out; --motion-std: 120ms ease-out; --motion-slow: 300ms ease-out; } /* ── Warm Dark theme (opt-in via ) ──────────── */ [data-theme="dark"] { --bg-base: #1A1714; --bg-surface: #221E1A; --bg-subtle: #2A2520; --bg-elevated: #2E2823; --bg-border: #3A332C; --bg-border-strong: #4A4138; --text-primary: #F0E9DC; --text-secondary: #BCB0A0; --text-muted: #897E6E; --text-on-accent: #FFFFFF; --accent: #5FB3A8; --accent-strong: #4A9C92; --accent-bright: #74C6BB; --accent-soft: #233330; --danger: #E07A6E; --danger-soft: #3A2522; --success: #6FBF8E; --success-soft: #22332A; --warning: #D79A52; --warning-soft: #332A1C; --info: #6FA6D8; --info-soft: #1F2D3A; --compare-a: #5FB3A8; --compare-a-soft: #233330; --compare-b: #6FA6D8; --compare-b-soft: #1F2D3A; --shadow-sm: 0 1px 2px rgba(0,0,0,0.22); --shadow-md: 0 4px 16px rgba(0,0,0,0.32); --shadow-lg: 0 16px 48px rgba(0,0,0,0.44); } /* ── Reset ───────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } img, svg { display: block; max-width: 100%; } button { font: inherit; cursor: pointer; border: none; background: none; } a { color: var(--accent); text-underline-offset: 2px; } a:hover { color: var(--accent-bright); } ul, ol { list-style: none; } /* ── Base type ───────────────────────────────────────────────────────── */ html { font-size: var(--font-size-base); -webkit-text-size-adjust: 100%; } body { font-family: var(--font-body); font-size: var(--font-size-base); line-height: 1.6; color: var(--text-primary); background: var(--bg-base); } h1 { font-family: var(--font-display); font-size: var(--font-size-xl); line-height: 1.25; } h2 { font-family: var(--font-display); font-size: var(--font-size-lg); line-height: 1.3; } h3 { font-family: var(--font-display); font-size: var(--font-size-md); line-height: 1.35; } h1, h2, h3 { color: var(--text-primary); } p { margin-bottom: var(--space-4); } p:last-child { margin-bottom: 0; } /* ── Focus visible (never remove focus styles) ───────────────────────── */ :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; } :focus:not(:focus-visible) { outline: none; } /* ── Utilities ───────────────────────────────────────────────────────── */ .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } .text-muted { color: var(--text-muted); font-size: var(--font-size-sm); } .text-secondary { color: var(--text-secondary); } .text-success { color: var(--success); } .text-warning { color: var(--warning); } .text-danger { color: var(--danger); } .text-mono { font-family: var(--font-mono); font-size: var(--font-size-sm); } /* ── Reduced motion ──────────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; animation-iteration-count: 1 !important; } }