@import url("/styles/themes.css"); @import url("/styles/chrome.css"); /* ─── Ember design tokens · single source of truth ──────────────────────── Color + typography for the whole site. Imported by styles/landing.css (landing + blog) and help/style.css (help center). THEMES :root → Ember, light (default + no-JS fallback) :root[data-theme=""] → one of the app's themes (themes.css) :root[data-theme="…"][data-mode="dark"] → dark palette of a dual-scheme theme A tiny inline script sets data-theme (theme id) and data-mode (light/dark) before first paint, from the visitor's saved choice or the OS. themes.css is GENERATED from build/themes.mjs (ported from the app's Theme.swift) — add a theme there, not by hand. The `--cave-*` tokens are the landing hero's fixed art direction (the dark "cave" that opens the scroll). They are theme-INDEPENDENT and never change. */ :root { /* Ember, light — the default palette (themes.css overrides for other themes). */ --bg: #FAF7F2; --bg-inset: #F3EFE8; --card: #FFFFFF; --divider: rgba(60, 40, 20, 0.08); --divider-strong: rgba(60, 40, 20, 0.14); --ink: #2C1F0E; --muted: #6F665B; --faint: #767063; --ember: #F08040; --ember-deep: #C77D14; --accent-wash: rgba(240, 128, 64, 0.14); --plus: #DFA32A; /* Fixed cave palette — landing hero only, constant across themes. */ --cave: #100B06; --cave-ink: #EDE2CF; --cave-muted: #A8957B; --cave-faint: #6E5E49; --cave-card: rgba(255, 255, 255, 0.03); /* World hues */ --personal: #E8845A; --work: #4A90D9; --family: #E07070; /* Type families — the system SF stack, matching the macOS app. */ --display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", sans-serif; --text: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", sans-serif; --serif: Georgia, "Times New Roman", serif; --mono: ui-monospace, "SF Mono", Menlo, monospace; /* Type scale — shared by blog articles and help prose. */ --fs-h1: clamp(30px, 4vw, 40px); --fs-h2: 24px; --fs-h3: 18px; --fs-lede: 19px; --fs-body: 16px; --fs-small: 13px; --fs-label: 11px; --lh-tight: 1.2; --lh-body: 1.7; color-scheme: light; }