/* =========================================================================== Little Big Humans — design tokens. Vendored from `colors_and_type.css` in the LBH design system, plus a dark theme that system does not ship. Treat this file as the design system: change it when the brand changes, not when this app needs a one-off. App components live in app.css and are built only from the tokens below. Two deliberate departures from the LBH "three colors only" rule, both forced and both documented at the point of use: 1. --accent in dark mode is a lighter tint of Mountain's own hue (244°). Mountain #190ADB on Ink scores 1.71:1 — unreadable. 2. --attention is drawn from the second fill in the shipped logo (#E8633A), darkened for contrast on Paper. It is not a new hue: it is already in the brand mark. =========================================================================== */ /* ---------- Söhne (Klim Type Foundry) — LICENSED, NOT REDISTRIBUTABLE ------ These files are gitignored. On a machine without them the @font-face rules below simply fail and the stack falls through to Manrope, which the LBH guide names as the sanctioned substitute. Nothing else needs to change. */ @font-face { font-family: "Söhne"; src: url("/static/brand/fonts/soehne-buch.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Söhne"; src: url("/static/brand/fonts/soehne-kraftig.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "Söhne"; src: url("/static/brand/fonts/soehne-halbfett.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } /* ---------- Manrope + Lora (SIL Open Font License) ---------- Self-hosted rather than pulled from Google Fonts: this app holds personal data on localhost and should not phone a third party to render itself. Both are variable fonts, so one file covers the whole weight range. */ @font-face { font-family: "Manrope"; src: url("/static/brand/fonts/manrope.woff2") format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap; } @font-face { font-family: "Lora"; src: url("/static/brand/fonts/lora.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; } :root { /* === BRAND COLOR — three named ramps, as specified. ==================== */ --color-mountain: #190ADB; /* the only accent */ --color-paper: #FFFAF8; /* warm off-white; never plain #FFF as page bg */ --color-ink: #1C1C1E; /* near-black, faint blue cast */ --color-mountain-rgb: 25 10 219; --color-paper-rgb: 255 250 248; --color-ink-rgb: 28 28 30; /* Neutrals are Ink at alpha. Never a mid-grey hue. */ --ink-06: rgb(28 28 30 / .06); --ink-12: rgb(28 28 30 / .12); --ink-20: rgb(28 28 30 / .20); --ink-40: rgb(28 28 30 / .40); --ink-60: rgb(28 28 30 / .60); --ink-80: rgb(28 28 30 / .80); /* === SEMANTIC TOKENS — components use only these. ====================== */ --bg: var(--color-paper); --bg-elev: #FFFFFF; /* card over paper: a subtle step up */ --bg-sunken: #F6F1EE; /* table heads, inputs, inset strips */ --bg-inverse: var(--color-ink); --fg: var(--color-ink); --fg-muted: var(--ink-60); --fg-subtle: var(--ink-40); --fg-on-accent: var(--color-paper); --fg-on-inverse: var(--color-paper); --accent: var(--color-mountain); --accent-hover: var(--color-mountain); /* brand rule: no hue shift on hover */ --accent-wash: rgb(25 10 219 / .07); /* selected pill, active nav */ /* Overdue / missing / destructive. See the header note. 5.35:1 on Paper. */ --attention: #BB3D16; --attention-wash: rgb(232 99 58 / .12); --border: var(--ink-12); --border-strong: var(--ink-20); /* === TYPE ============================================================== */ --font-display: "Söhne", "Manrope", system-ui, sans-serif; --font-ui: "Söhne", "Manrope", system-ui, sans-serif; --font-text: "Lora", "Iowan Old Style", Georgia, serif; --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace; --fs-display: 49px; --lh-display: 1.1; --tr-display: -0.015em; --fs-h1: 33px; --lh-h1: 1.2; --tr-h1: -0.010em; --fs-h2: 25px; --lh-h2: 1.25; --tr-h2: -0.0075em; --fs-h3: 20px; --lh-h3: 1.3; --tr-h3: -0.005em; --fs-body: 15px; --lh-body: 1.5; --fs-caption: 13px; --lh-caption: 1.45; --tr-caption: 0.005em; --fs-small: 11px; --lh-small: 1.4; --tr-small: 0.06em; /* === SPACE — 4px step. ================================================= */ --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; --space-16: 64px; --space-20: 80px; /* === RADII — geometric and small. ====================================== */ --radius-xs: 2px; --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-pill: 999px; /* === ELEVATION — restrained; cards rely on the Paper→white step. ======= */ --shadow-1: 0 1px 2px rgb(28 28 30 / .04), 0 1px 1px rgb(28 28 30 / .03); --shadow-2: 0 4px 12px rgb(28 28 30 / .06), 0 1px 2px rgb(28 28 30 / .04); --shadow-3: 0 12px 32px rgb(28 28 30 / .10), 0 2px 6px rgb(28 28 30 / .06); --shadow-focus: 0 0 0 3px rgb(25 10 219 / .25); /* === MOTION — no bounce, no parallax. ================================== */ --ease-out: cubic-bezier(.2, .8, .2, 1); --dur-quick: 120ms; --dur-base: 200ms; color-scheme: light dark; } /* =========================================================================== DARK THEME The LBH system ships dark background *plates* but no dark token set, so this is derived rather than quoted. Ink becomes the page, Paper becomes the type, and neutrals invert to Paper-at-alpha so no grey hue is introduced. =========================================================================== */ @media (prefers-color-scheme: dark) { :root { --bg: var(--color-ink); --bg-elev: #232326; --bg-sunken: #171719; --bg-inverse: var(--color-paper); --fg: var(--color-paper); --fg-muted: rgb(255 250 248 / .58); --fg-subtle: rgb(255 250 248 / .38); --fg-on-inverse: var(--color-ink); /* Mountain at the same 244° hue, lifted to L75% — 5.34:1 on Ink. */ --accent: #8980FF; --accent-hover: #8980FF; --accent-wash: rgb(137 128 255 / .14); --fg-on-accent: var(--color-ink); --attention: #EC805F; /* 6.34:1 on Ink */ --attention-wash: rgb(236 128 95 / .16); --border: rgb(255 250 248 / .13); --border-strong: rgb(255 250 248 / .22); --shadow-1: 0 1px 2px rgb(0 0 0 / .32); --shadow-2: 0 4px 12px rgb(0 0 0 / .38), 0 1px 2px rgb(0 0 0 / .28); --shadow-3: 0 12px 32px rgb(0 0 0 / .46), 0 2px 6px rgb(0 0 0 / .32); --shadow-focus: 0 0 0 3px rgb(137 128 255 / .32); } } /* =========================================================================== TYPE UTILITIES Söhne for every piece of UI furniture; Lora only where there is prose to read — note bodies, interaction bodies, page ledes. The LBH guide is explicit that the body serif does not belong on labels and buttons. =========================================================================== */ .t-display { font: 700 var(--fs-display)/var(--lh-display) var(--font-display); letter-spacing: var(--tr-display); } .t-h1 { font: 700 var(--fs-h1)/var(--lh-h1) var(--font-display); letter-spacing: var(--tr-h1); } .t-h2 { font: 700 var(--fs-h2)/var(--lh-h2) var(--font-display); letter-spacing: var(--tr-h2); } .t-h3 { font: 500 var(--fs-h3)/var(--lh-h3) var(--font-display); letter-spacing: var(--tr-h3); } .t-ui { font: 500 var(--fs-body)/1.2 var(--font-ui); } .t-prose { font: 400 var(--fs-body)/1.6 var(--font-text); } .t-caption { font: 400 var(--fs-caption)/var(--lh-caption) var(--font-ui); letter-spacing: var(--tr-caption); color: var(--fg-muted); } .t-eyebrow { font: 500 var(--fs-small)/var(--lh-small) var(--font-ui); letter-spacing: var(--tr-small); text-transform: uppercase; color: var(--fg-muted); }