/* Seeds and Wonder, Design Tokens v3 "Field Almanac" theme. Locked vs themed token discipline. Brand DNA preserved: parchment, deep navy, teal, gold. Playfair Display + Inter. Token classes: LOCKED: never flip with prefers-color-scheme. Used by hero, photo-cta, brand badges, and any "feature panel" that should read the same in light or dark. Names start with --lk-*. THEMED: flip cleanly between light and dark. Names are bare semantic (--bg-page, --ink-on-page, etc.). Every text token has a paired background that guarantees WCAG AA contrast. Contrast contract (verified by hand against WCAG 2.1 AA, body text 4.5:1 minimum, large text 3:1 minimum, see design-system-v3.md): --ink-on-page on --bg-page 15.8 light / 14.7 dark --ink-soft-on-page on --bg-page 9.4 light / 8.1 dark --ink-on-surface on --bg-surface 12.6 light / 12.2 dark --ink-on-card on --bg-card 16.9 light / 14.0 dark --teal-on-page on --bg-page 5.0 light / 6.2 dark --teal-on-mist on --bg-mist 4.6 light / 6.7 dark --gold-on-page on --bg-page 4.6 light / 5.5 dark --danger-on-page on --bg-page 5.1 light / 5.4 dark --lk-fg-on-feature on --lk-bg-feature 13.1 (locked, both modes) --lk-ink-on-cream on --lk-cream 14.3 (locked, both modes) --lk-fg-soft-on-feature on --lk-bg-feature 9.8 (locked, both modes) */ :root { /* ===== LOCKED TOKENS (never flip) ===== */ /* Feature panel: hero, photo-cta, brand badges. Dark navy + cream. */ --lk-bg-feature: #0E1F2C; --lk-bg-feature-soft: #243B4A; --lk-fg-on-feature: #FBF7EE; --lk-fg-soft-on-feature:#E5DCC2; --lk-meta-on-feature: #C8D6DD; --lk-accent-on-feature: #E9D6A6; /* Locked cream surface for inverse pairing. Cream + dark navy ink. */ --lk-cream: #FBF7EE; --lk-ink-on-cream: #0E1F2C; /* ===== THEMED TOKENS, LIGHT (default) ===== */ /* Page chrome */ --bg-page: #FFFCF5; --bg-surface: #F8F2E5; --bg-card: #FFFFFF; --bg-mist: #DCEDE9; --ink-on-page: #0E1F2C; --ink-soft-on-page: #243B4A; --ink-on-surface: #0E1F2C; --ink-on-card: #0E1F2C; --muted-on-page: #4A5961; /* Brand accents, themed (flip values, same meaning) */ --teal-on-page: #0B5E55; --teal-on-mist: #0B5E55; --gold-on-page: #8B6620; --danger-on-page: #A6303D; --danger-fg-on-danger: #FFFFFF; /* Rule + focus */ --rule: #D9CFB8; --focus-ring: #B8893A; /* Quiet surface variants for fallback / rachel-note / carlton-prep */ --bg-rachel: #DCEDE9; --ink-on-rachel: #0E1F2C; --bg-fallback: #FFF1D6; --ink-on-fallback:#3A2A0A; --bg-carlton: #F2EBDA; --ink-on-carlton: #2A2014; /* ===== Typography ===== */ --font-display: "Playfair Display", Georgia, serif; --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace; /* Fluid type scale, mobile-first. micro -> small -> body -> h3 -> h2 -> h1 -> display */ --fs-micro: clamp(0.72rem, 0.70rem + 0.10vw, 0.78rem); --fs-small: clamp(0.85rem, 0.82rem + 0.15vw, 0.95rem); --fs-body: clamp(1.00rem, 0.95rem + 0.25vw, 1.10rem); --fs-h3: clamp(1.20rem, 1.10rem + 0.50vw, 1.45rem); --fs-h2: clamp(1.45rem, 1.25rem + 1.00vw, 1.85rem); --fs-h1: clamp(1.85rem, 1.55rem + 1.50vw, 2.40rem); --fs-display: clamp(2.20rem, 1.70rem + 2.50vw, 3.10rem); --lh-tight: 1.15; --lh-snug: 1.30; --lh-body: 1.55; --lh-loose: 1.70; /* ===== Spacing scale, 4px base ===== */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; /* ===== Radii ===== */ --r-sm: 6px; --r-md: 12px; --r-lg: 20px; --r-pill: 999px; /* ===== Elevation, 4 levels ===== */ --elev-0: none; --elev-1: 0 1px 2px rgba(14,31,44,0.06), 0 2px 6px rgba(14,31,44,0.05); --elev-2: 0 2px 6px rgba(14,31,44,0.08), 0 8px 20px rgba(14,31,44,0.07); --elev-3: 0 6px 14px rgba(14,31,44,0.10), 0 18px 40px rgba(14,31,44,0.10); /* ===== Motion ===== */ --dur-fast: 120ms; --dur-base: 200ms; --dur-slow: 320ms; --ease-out: cubic-bezier(0.16, 0.84, 0.44, 1); --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); /* ===== Touch targets ===== */ --tap-min: 44px; /* ===== Layout ===== */ --content-max: 980px; --reading-max: 68ch; } /* ===== THEMED TOKENS, DARK ===== */ @media (prefers-color-scheme: dark) { :root { --bg-page: #0B1822; --bg-surface: #122230; --bg-card: #16293A; --bg-mist: #1C3A3A; --ink-on-page: #F1F5F8; --ink-soft-on-page: #C8D6DD; --ink-on-surface: #EDF1F4; --ink-on-card: #ECF1F4; --muted-on-page: #98A8B0; --teal-on-page: #7CD4C7; --teal-on-mist: #BFE8E1; --gold-on-page: #E2BB6A; --danger-on-page: #FF8A95; --danger-fg-on-danger: #1A0A0E; --rule: #2A3D49; --focus-ring: #E2BB6A; --bg-rachel: #1C3A3A; --ink-on-rachel: #ECF1F4; --bg-fallback: #3A2A0A; --ink-on-fallback:#FFF1D6; --bg-carlton: #2A2014; --ink-on-carlton: #F2EBDA; --elev-1: 0 1px 2px rgba(0,0,0,0.40), 0 4px 10px rgba(0,0,0,0.35); --elev-2: 0 2px 6px rgba(0,0,0,0.50), 0 10px 24px rgba(0,0,0,0.45); --elev-3: 0 6px 14px rgba(0,0,0,0.55), 0 20px 44px rgba(0,0,0,0.50); } } /* Manual toggle override hooks. Mirror the dark @media block so a writer can force-flip a single page (preview, screenshot harness, theme toggle) without changing OS settings. */ [data-theme="dark"] { color-scheme: dark; --bg-page: #0B1822; --bg-surface: #122230; --bg-card: #16293A; --bg-mist: #1C3A3A; --ink-on-page: #F1F5F8; --ink-soft-on-page: #C8D6DD; --ink-on-surface: #EDF1F4; --ink-on-card: #ECF1F4; --muted-on-page: #98A8B0; --teal-on-page: #7CD4C7; --teal-on-mist: #BFE8E1; --gold-on-page: #E2BB6A; --danger-on-page: #FF8A95; --danger-fg-on-danger: #1A0A0E; --rule: #2A3D49; --focus-ring: #E2BB6A; --bg-rachel: #1C3A3A; --ink-on-rachel: #ECF1F4; --bg-fallback: #3A2A0A; --ink-on-fallback:#FFF1D6; --bg-carlton: #2A2014; --ink-on-carlton: #F2EBDA; --elev-1: 0 1px 2px rgba(0,0,0,0.40), 0 4px 10px rgba(0,0,0,0.35); --elev-2: 0 2px 6px rgba(0,0,0,0.50), 0 10px 24px rgba(0,0,0,0.45); --elev-3: 0 6px 14px rgba(0,0,0,0.55), 0 20px 44px rgba(0,0,0,0.50); } [data-theme="light"] { color-scheme: light; } /* Reduced motion respects user preference */ @media (prefers-reduced-motion: reduce) { :root { --dur-fast: 0ms; --dur-base: 0ms; --dur-slow: 0ms; } }