/* Design tokens, mirrored from the Figma variable collections: Primitives (ink / paper / ember / six pastel pairs), Color (semantic aliases), Scale (space + radius), Letter (per-letter paper pair) and the text styles. Nothing else in the CSS should contain a raw colour or a raw pixel size that has a token here. Components never reach for a pastel directly — they use --letter-bg / --letter-line, which [data-paper] re-points. */ :root { /* ---- ink, paper, ember ------------------------------------------------ */ --ink-900: #1e1b2e; --bg-canvas: #edf2f6; --bg-paper: #faf9f8; --bg-inverse: #1e1b2e; --text-primary: #1e1b2e; --text-secondary: #6e6982; --text-tertiary: #8e8a9e; --text-inverse: #ffffff; --text-accent: #c93a18; --border-subtle: #ddd9ce; --border-strong: #8e8a9e; /* ---- pastel paper pairs ---------------------------------------------- */ --pastel-plain-fill: #fffdf8; --pastel-plain-line: #d8d2c4; --pastel-butter-fill: #eee5d8; --pastel-butter-line: #d2b79d; --pastel-lime-fill: #ecf1d5; --pastel-lime-line: #cbdd78; --pastel-peach-fill: #fde1d5; --pastel-peach-line: #e6af98; --pastel-sky-fill: #d5f9fd; --pastel-sky-line: #6fc4cd; --pastel-lilac-fill: #ead3e0; --pastel-lilac-line: #e2a8c9; /* ---- the chosen letter's paper (default: plain, the white sheet) ------ */ --letter-bg: var(--pastel-plain-fill); --letter-line: var(--pastel-plain-line); /* ---- scale ----------------------------------------------------------- */ --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-10: 40px; --sp-12: 48px; --r-sm: 8px; --r-md: 16px; --r-full: 1000px; /* ---- elevation ------------------------------------------------------- */ --elev-paper: 0 2px 6px rgba(30, 27, 46, 0.05), 0 10px 28px -4px rgba(30, 27, 46, 0.08); /* ---- typography ------------------------------------------------------ */ /* Fallbacks are chosen for similar proportions. Every text style below pins its line-height in px, so a font swap reflows words but never shifts the layout vertically. */ --font-display: 'Fraunces', Georgia, 'Times New Roman', serif; --font-ui: 'Instrument Sans', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif; --font-hand: 'Caveat', 'Bradley Hand', 'Segoe Script', cursive; /* Fraunces is a variable font; the design pins the two style axes. */ --fraunces-axes: 'SOFT' 0, 'WONK' 1; /* ---- motion ---------------------------------------------------------- */ /* Decelerating, like paper settling. Nothing overshoots or bounces. */ --ease-soft: cubic-bezier(0.22, 1, 0.36, 1); --ease-fold: cubic-bezier(0.65, 0, 0.35, 1); --dur-micro: 140ms; --dur-quick: 240ms; --dur-move: 420ms; --dur-scene: 560ms; /* ---- layout ---------------------------------------------------------- */ /* The design is a 393px frame with a 24px gutter, i.e. a 345px measure. */ --measure: 345px; --gutter: var(--sp-6); --column: calc(var(--measure) + 2 * var(--gutter)); } /* Per-letter paper. Works at any scope: on for the personal pages and the Sent screen, or on just the envelope preview while the writer is still choosing. */ [data-paper='plain'] { --letter-bg: var(--pastel-plain-fill); --letter-line: var(--pastel-plain-line); } [data-paper='butter'] { --letter-bg: var(--pastel-butter-fill); --letter-line: var(--pastel-butter-line); } [data-paper='lime'] { --letter-bg: var(--pastel-lime-fill); --letter-line: var(--pastel-lime-line); } [data-paper='peach'] { --letter-bg: var(--pastel-peach-fill); --letter-line: var(--pastel-peach-line); } [data-paper='sky'] { --letter-bg: var(--pastel-sky-fill); --letter-line: var(--pastel-sky-line); } [data-paper='lilac'] { --letter-bg: var(--pastel-lilac-fill); --letter-line: var(--pastel-lilac-line); } /* Contrast policy — keep this in mind when editing colours. Measured against the pastel fills (butter #eee5d8 is the darkest case): --text-primary #1e1b2e ~13:1 — safe anywhere --text-secondary #6e6982 ~4.1:1 — body text 15px+ only --text-tertiary #8e8a9e ~2.6:1 — FAILS AA. On tinted pages use it only for decoration; captions on a pastel page must sit on a --bg-paper card, where it is ~3.1:1 and still reserved for 13px+ supporting text. --text-accent #c93a18 ~4.9:1 on paper — large text only (the Caveat sign-off). */