/* Tap-A-Post design tokens. Values are transcribed from design_handoff_tapapost/README.md "Design Tokens" and verified against the .dc.html prototypes. The prototypes are the pixel source of truth โ€” do not adjust a value here without changing it there too. The tap page (/t/) does NOT load this file: it inlines its own subset so it can stay under budget with zero external requests. See docs/JOURNEY.md ยง6. */ :root { /* Opt out of Chrome's auto dark mode: this is a light parchment design, and auto-darkening turns every parchment surface muddy brown. */ color-scheme: only light; /* ---- Parchment surfaces ---------------------------------------------- */ --parchment-page: linear-gradient(160deg, #F7EED8, #F1E4C4 55%, #F3E7C8); --parchment-letter: #FBF6E8; --parchment-paper: #F7F1E3; --parchment-input: #FFFDF6; --envelope-kraft: linear-gradient(150deg, #F3E8CA, #E9DAB2 55%, #E0CFA2); /* ---- Ink -------------------------------------------------------------- */ --ink: #2A2416; /* web */ --ink-print: #1F2430; /* print artefacts and the tap page */ --ink-muted: rgba(42, 36, 22, 0.65); --ink-faint: rgba(42, 36, 22, 0.5); --ink-error: #8E2B20; /* stamp + error crimson */ /* ---- Brand reds ------------------------------------------------------- */ --postbox: #C0392B; --postbox-hover: #A93226; --postbox-shadow: #6E1F16; --washi-red: #B33A2C; --liner: #8E2B20; --liner-deep: #7A241A; /* ---- Greens and blues ------------------------------------------------- */ --forest: #1E5B3A; --forest-shadow: #123B25; --forest-hover: #2E7D52; --navy: #23305B; --navy-shadow: #0E1430; --midnight: #1A2547; --pine: #2E3A33; /* default backdrop */ /* ---- Gold ------------------------------------------------------------- */ --gold: #C9A227; --gold-hi: #E7CF74; --gold-hi-soft: #EFDA96; --gold-deep: #8F6E14; --gold-pale: #EAD98F; /* gold text on dark */ --seal-face: radial-gradient(circle at 34% 28%, #E7CF74, #C9A227 52%, #8F6E14); --seal-blob: 46% 54% 50% 50% / 48% 46% 54% 52%; /* ---- Type ------------------------------------------------------------- */ --font-display: "Almendra", Georgia, serif; --font-body: "Alegreya", Georgia, serif; --font-script: "Mrs Saint Delafield", cursive; --font-print: "Cormorant Garamond", Georgia, serif; --font-mono: ui-monospace, Menlo, Consolas, monospace; --text-body: 1rem; /* 16px; prototypes range 15โ€“19.5px */ --leading-body: 1.6; /* prototypes range 1.5โ€“1.68 */ /* ---- Geometry --------------------------------------------------------- */ --radius-input: 8px; --radius-cta: 12px; --radius-pill: 999px; --radius-phone: 34px; --radius-phone-inner: 24px; --unit: 8px; --focus-ring: 3px solid var(--gold); --focus-offset: 3px; /* ---- Motion ----------------------------------------------------------- */ --ease-stamp: cubic-bezier(0.2, 1.5, 0.4, 1); /* postmark overshoot */ --dur-page-turn: 400ms; --dur-theme: 800ms; --dur-stamp: 450ms; /* ---- Per-page theme (overridden by [data-theme]) ---------------------- */ --backdrop: var(--pine); --accent: var(--postbox); --theme-ink: rgba(142, 43, 32, 0.65); } /* Order Builder product themes. Transcribed verbatim from the THEMES map in Order Builder.dc.html. Setting data-theme on re-skins the page: backdrop, accent, postmark ink. The glyph, season caps, script line and CTA wording are content, so they live in the template, not here. */ [data-theme="santa"] { --backdrop: #2E3A33; --accent: #C0392B; --theme-ink: rgba(142, 43, 32, 0.65); } [data-theme="voice"] { --backdrop: #4A382B; --accent: #9C4A1F; --theme-ink: rgba(156, 74, 31, 0.7); } [data-theme="story"] { --backdrop: #1A2547; --accent: #23305B; --theme-ink: rgba(35, 48, 91, 0.7); } [data-theme="hunt"] { --backdrop: #33421F; --accent: #1E5B3A; --theme-ink: rgba(30, 91, 58, 0.7); } [data-theme="milestone"] { --backdrop: #4E4630; --accent: #8A6F3E; --theme-ink: rgba(122, 96, 42, 0.75); } [data-theme="timelock"] { --backdrop: #262233; --accent: #6E5730; --theme-ink: rgba(94, 74, 14, 0.75); }