/* ============================================================ 250 YEARS — FORWARD AND BACK Visual Identity System · "Federal Brass" Design Tokens v1.0 · 2026-05-22 ------------------------------------------------------------ Heritage × Future fusion. Federal-navy ground, muted brass, parchment text. Didone display, Georgia body, mono data layer. Palette derived from the book cover (04_build/assets/cover.jpg). ============================================================ */ :root { /* ---- CORE PALETTE (from cover) ------------------------- */ --fb-ink-navy: #1B1F2B; /* primary ground — federal midnight */ --fb-ink-navy-deep: #14171F; /* deeper panels, footers */ --fb-ink-navy-soft: #262B39; /* raised panel on navy */ --fb-brass: #C6A77A; /* PRIMARY accent — muted brass/gold */ --fb-brass-bright: #D9BC8C; /* hover/active, hairlines on dark */ --fb-brass-deep: #A8895E; /* pressed / fine detail */ --fb-parchment: #E8E1D2; /* primary text on dark; light text */ --fb-parchment-deep: #D3C9B3; /* secondary parchment / muted text */ /* ---- EXTENDED ERA PALETTE (range across 12 chapters) --- */ --fb-oxblood: #7C3A2D; /* pamphlet red / sealing wax — 1776 era, alerts */ --fb-prussian: #2E4A5C; /* correspondence blue — secondary cool */ --fb-verdigris: #4F7A6A; /* oxidized copper — 2276 / future accent */ --fb-iron: #2A2D33; /* furnace iron — neutral dark panel */ /* ---- PAPER MODE (light layouts / print) ---------------- */ --fb-paper: #F4EEE0; /* light ground */ --fb-paper-deep: #EAE1CE; /* light raised panel */ --fb-paper-line: #DDD3BF; /* hairlines on paper */ /* ---- SEMANTIC ------------------------------------------ */ --fb-bg: var(--fb-ink-navy); --fb-bg-deep: var(--fb-ink-navy-deep); --fb-text: var(--fb-parchment); --fb-text-muted: var(--fb-parchment-deep); --fb-accent: var(--fb-brass); --fb-rule: color-mix(in srgb, var(--fb-brass) 60%, transparent); --fb-rule-faint: color-mix(in srgb, var(--fb-brass) 24%, transparent); /* ---- TYPE FAMILIES ------------------------------------- */ /* DISPLAY — monument / heritage voice (Didone, matches cover) */ --fb-font-display: "Playfair Display", "Didot", "Bodoni MT", Georgia, serif; /* BODY — author's reading register */ --fb-font-body: Georgia, "Source Serif 4", "Iowan Old Style", "Times New Roman", serif; /* DATA / KICKER — recording-layer & compute voice; numbers carry authority */ --fb-font-mono: "IBM Plex Mono", "SFMono-Regular", "Roboto Mono", ui-monospace, monospace; /* UTILITY — dense UI, captions, web body where serif is too heavy */ --fb-font-sans: "Source Sans 3", "Inter", -apple-system, "Segoe UI", sans-serif; /* ---- TYPE SCALE (fluid) -------------------------------- */ --fb-step--1: clamp(0.78rem, 0.74rem + 0.18vw, 0.88rem); /* fine print / data */ --fb-step-0: clamp(1.00rem, 0.96rem + 0.22vw, 1.13rem); /* body */ --fb-step-1: clamp(1.25rem, 1.16rem + 0.45vw, 1.55rem); /* lead / H4 */ --fb-step-2: clamp(1.56rem, 1.40rem + 0.80vw, 2.15rem); /* H3 */ --fb-step-3: clamp(1.95rem, 1.68rem + 1.35vw, 3.00rem); /* H2 */ --fb-step-4: clamp(2.44rem, 2.00rem + 2.20vw, 4.20rem); /* H1 / chapter title */ --fb-step-5: clamp(3.05rem, 2.30rem + 3.75vw, 6.00rem); /* display */ --fb-step-hero: clamp(4.50rem, 2.80rem + 8.5vw, 11.0rem); /* hero numeral "250" */ /* ---- TRACKING / LEADING -------------------------------- */ --fb-track-kicker: 0.34em; /* mono kickers, uppercase */ --fb-track-display: 0.005em; --fb-leading-body: 1.62; --fb-leading-tight: 1.12; /* ---- SPACING (8pt base) -------------------------------- */ --fb-space-1: 0.25rem; --fb-space-2: 0.5rem; --fb-space-3: 0.75rem; --fb-space-4: 1rem; --fb-space-5: 1.5rem; --fb-space-6: 2rem; --fb-space-7: 3rem; --fb-space-8: 4rem; --fb-space-9: 6rem; /* ---- MOTIF / STRUCTURE --------------------------------- */ --fb-hairline: 1px; --fb-keyline-width: 1.5px; /* broadside frame stroke */ --fb-keyline-inset: 2.2%; /* frame inset from edge */ --fb-radius: 0; /* system is square — letterpress, no rounding */ --fb-radius-chip: 2px; /* era tags only */ --fb-maxw: 72rem; } /* ---- TIMELINE ANCHORS (book spine) ----------------------- */ /* 1776 · 1826 · 1861 · 1900 · 1926 · 1969 · 2001 · 2026 · 2076 · 2176 · 2276 */ /* ============================================================ PROMO SITE EXTENSIONS · youcannoteat.codes · v1 2026-06-10 All values derive from the core palette via color-mix — no new hex enters the system here. ============================================================ */ :root { /* ---- ERA-GRADE SCALE (the 250-year descent) ------------ Backdrop color per chapter. Forge-light (oxblood) cools through federal midnight into verdigris fog. */ --era-bg-01: color-mix(in srgb, var(--fb-oxblood) 38%, var(--fb-ink-navy-deep)); /* 1776 forge */ --era-bg-02: color-mix(in srgb, var(--fb-oxblood) 24%, var(--fb-ink-navy-deep)); /* 1826 ember */ --era-bg-03: color-mix(in srgb, var(--fb-brass-deep) 16%, var(--fb-ink-navy-deep));/* 1876 furnace brass */ --era-bg-04: color-mix(in srgb, var(--fb-iron) 55%, var(--fb-ink-navy-deep)); /* 1926 machine iron */ --era-bg-05: color-mix(in srgb, var(--fb-prussian) 26%, var(--fb-ink-navy-deep)); /* 1976 broadcast blue */ --era-bg-06: var(--fb-ink-navy); /* 2026 the hinge */ --era-bg-07: color-mix(in srgb, var(--fb-prussian) 42%, var(--fb-ink-navy-deep)); /* 2046 server glow */ --era-bg-08: color-mix(in srgb, var(--fb-verdigris) 16%, var(--fb-ink-navy-deep)); /* 2076 first copper */ --era-bg-09: color-mix(in srgb, var(--fb-verdigris) 26%, var(--fb-ink-navy-deep)); /* 2126 managed green */ --era-bg-10: color-mix(in srgb, var(--fb-verdigris) 34%, var(--fb-ink-navy-deep)); /* 2176 long descent */ --era-bg-11: color-mix(in srgb, var(--fb-verdigris) 46%, var(--fb-ink-navy-deep)); /* 2276 fog */ --era-bg-12: color-mix(in srgb, var(--fb-parchment) 9%, var(--fb-ink-navy-deep)); /* epilogue stone */ /* ---- ERA NUMERAL ACCENTS (legible on every era-bg) ------ Past burns gold; the future cools to pale verdigris fog. */ --era-accent-past: var(--fb-brass-bright); --era-accent-future: color-mix(in srgb, var(--fb-verdigris) 48%, var(--fb-parchment)); --era-accent-epilogue: var(--fb-parchment); /* ---- COMPONENT TOKENS ----------------------------------- */ --site-hud-size: clamp(1.1rem, 1rem + 1.2vw, 2rem); --site-portal-maxw: 46rem; --site-panel-bg: color-mix(in srgb, var(--fb-ink-navy-soft) 78%, transparent); --site-panel-line: var(--fb-rule-faint); --site-glow: color-mix(in srgb, var(--fb-brass) 22%, transparent); --site-dim: color-mix(in srgb, var(--fb-ink-navy-deep) 88%, transparent); --site-terminal-bg: color-mix(in srgb, var(--fb-ink-navy-deep) 92%, var(--fb-iron)); --site-ease: cubic-bezier(.22,.61,.36,1); --site-dur-1: 180ms; --site-dur-2: 420ms; --site-dur-3: 900ms; }