/* * Earhart design tokens — Art Deco Travel Poster (1930s, PanAm / Imperial Airways era). * * Palette: parchment ivory + aviator navy + signal red + polished chrome. * Typography: Limelight (display marquee) + Poiret One (secondary Deco) + * Alegreya (literary body serif) + Courier Prime (air-mail telegraph mono). * * Namespace: --eh-- * Token NAMES are preserved from the previous iteration for low-churn refactor; * their VALUES have been fully re-grounded in the Deco palette. `brass` now * means "signal red accent" — the canonical emphasis color of the new theme. * * Theme resolution (in order): * 1. :root[data-theme="dark"] -> explicit dark * 2. :root[data-theme="light"] -> explicit light * 3. @media (prefers-color-scheme: dark) without override -> auto dark * 4. :root (default) -> light * * Page CSS files MUST reference tokens only. No hex literals outside this file. */ :root { /* — Color: surfaces (daylight aviator — aged parchment / airmail paper) — */ --eh-color-paper: #f4ead0; --eh-color-paper-raised: #fbf3df; --eh-color-paper-edge: #e8dcb7; /* — Color: ink (deep aviator navy used as body-text color, not black, for a warm 1930s feel) — */ --eh-color-ink: #0e1f30; --eh-color-ink-soft: #2a4060; --eh-color-ink-muted: #465267; /* — Color: accents — brass = signal red (primary accent / emphasis) oxblood = deep oxblood leather (secondary warmth / closed state) navy = aviator navy (secondary accent / links / panels) sage = aviation green (success / open state) */ --eh-color-brass: #b53a2c; /* signal red */ --eh-color-brass-dark: #8a2a1f; /* crimson depth */ --eh-color-brass-soft: #f5d9d2; /* pale red tint for hover surfaces */ --eh-color-oxblood: #6d2a20; /* aged leather oxblood */ --eh-color-oxblood-dim: #4c1d17; --eh-color-navy: #1a3a5c; /* aviator navy */ --eh-color-navy-deep: #0e1f30; /* deep sky / panel bg */ --eh-color-sage: #3a6b3a; /* aviation-green open stamp */ --eh-color-chrome: #c4c0b0; /* polished aluminum highlight */ /* — Color: semantic — */ --eh-color-success: var(--eh-color-sage); --eh-color-danger: var(--eh-color-brass); --eh-color-accent: var(--eh-color-brass); --eh-color-focus: var(--eh-color-brass-dark); /* — Color: panels (navy placards / air-mail header bars) — */ --eh-color-panel: var(--eh-color-navy-deep); --eh-color-panel-text: #f4ead0; /* — Color: rules/dividers — */ --eh-color-rule: rgba(14, 31, 48, 0.14); --eh-color-rule-strong: rgba(14, 31, 48, 0.28); --eh-color-rule-brass: rgba(181, 58, 44, 0.55); /* — Typography: stacks — Display: Limelight = Broadway-marquee Deco, single weight 400, ideal for uppercase. Deco: Poiret One = thin geometric Deco, single weight 400, ideal for kickers. Body: Alegreya = literary serif with a 1930s-friendly cadence, wght 400–800. Mono: Courier Prime = typewriter / air-mail telegram, wght 400, 700. */ --eh-font-display: 'Limelight', 'Arial Black', Impact, sans-serif; --eh-font-deco: 'Poiret One', 'Futura', 'Century Gothic', sans-serif; --eh-font-body: 'Alegreya', 'Book Antiqua', 'Palatino Linotype', Georgia, serif; --eh-font-mono: 'Courier Prime', 'Courier New', ui-monospace, monospace; /* — Typography: fluid size scale (clamp: min, preferred, max) — */ --eh-fs-caption: clamp(0.75rem, 0.70rem + 0.20vw, 0.85rem); --eh-fs-body: clamp(0.95rem, 0.90rem + 0.30vw, 1.10rem); --eh-fs-lead: clamp(1.10rem, 1.02rem + 0.40vw, 1.25rem); --eh-fs-h3: clamp(1.25rem, 1.15rem + 0.60vw, 1.60rem); --eh-fs-h2: clamp(1.60rem, 1.40rem + 1.10vw, 2.25rem); --eh-fs-h1: clamp(2.10rem, 1.70rem + 2.20vw, 3.00rem); --eh-fs-display: clamp(2.80rem, 2.20rem + 3.50vw, 4.75rem); /* — Typography: line-height — */ --eh-lh-tight: 1.08; --eh-lh-snug: 1.30; --eh-lh-normal: 1.60; --eh-lh-loose: 1.80; /* — Typography: tracking — Limelight in all-caps benefits from slight positive tracking. Courier Prime at small sizes in all-caps too. */ --eh-tracking-tight: -0.01em; --eh-tracking-normal: 0; --eh-tracking-wide: 0.04em; --eh-tracking-caps: 0.16em; --eh-tracking-marquee:0.08em; /* — Spacing (4px base) — */ --eh-space-1: 4px; --eh-space-2: 8px; --eh-space-3: 12px; --eh-space-4: 16px; --eh-space-5: 20px; --eh-space-6: 24px; --eh-space-7: 32px; --eh-space-8: 40px; --eh-space-9: 56px; --eh-space-10: 72px; --eh-space-11: 96px; --eh-space-12: 128px; /* — Radius — Deco prefers sharp edges. Keep mostly flat. */ --eh-radius-none: 0; --eh-radius-sm: 2px; --eh-radius-md: 3px; --eh-radius-lg: 6px; --eh-radius-xl: 10px; --eh-radius-pill: 999px; /* — Shadow (crisp, paper / letterpress) — */ --eh-shadow-flat: 0 0 0 1px var(--eh-color-rule); --eh-shadow-lift: 0 1px 2px rgba(14, 31, 48, 0.10), 0 6px 18px rgba(14, 31, 48, 0.08); --eh-shadow-panel: 0 1px 0 0 var(--eh-color-rule-strong), 0 14px 34px rgba(14, 31, 48, 0.10); --eh-shadow-stamp: 0 1px 0 rgba(14, 31, 48, 0.05), inset 0 0 0 2px currentColor; /* — Motion — */ --eh-dur-fast: 120ms; --eh-dur-base: 220ms; --eh-dur-slow: 420ms; --eh-ease-out: cubic-bezier(0.20, 0.80, 0.20, 1.00); --eh-ease-in: cubic-bezier(0.80, 0.20, 0.80, 0.20); /* — Layout — */ --eh-max-prose: 64ch; --eh-max-content: 1200px; --eh-max-wide: 1400px; --eh-nav-height: 64px; /* — Print output (theme-independent) — */ --eh-color-print-paper: #ffffff; --eh-color-print-ink: #000000; /* — Input/form surface: plain white in light mode so form fields read like real paper against the ivory doc. Overridden in dark. — */ --eh-color-input-surface: #ffffff; /* — Atmosphere: paper grain (data-URI SVG turbulence). — */ --eh-grain-url: url("data:image/svg+xml;utf8,"); } /* — Dark theme: explicit via data-theme — night flight, aviator cockpit. — */ :root[data-theme="dark"] { --eh-color-paper: #0e1f30; /* deep aviator sky */ --eh-color-paper-raised: #16324d; /* raised panel */ --eh-color-paper-edge: #1a3a5c; /* alt surfaces */ --eh-color-ink: #f4ead0; --eh-color-ink-soft: #d6c79c; --eh-color-ink-muted: #9eacbf; --eh-color-brass: #e4614f; /* brighter signal red for dark */ --eh-color-brass-dark: #b53a2c; --eh-color-brass-soft: #3a1814; /* dark red tint for hover bg */ --eh-color-oxblood: #e4614f; --eh-color-oxblood-dim: #b53a2c; --eh-color-navy: #5578a0; --eh-color-navy-deep: #0a1723; --eh-color-sage: #7aa87a; --eh-color-chrome: #e5e0d2; --eh-color-panel: #0a1723; --eh-color-panel-text: #f4ead0; --eh-color-rule: rgba(244, 234, 208, 0.14); --eh-color-rule-strong: rgba(244, 234, 208, 0.30); --eh-color-rule-brass: rgba(228, 97, 79, 0.55); --eh-color-focus: #f0c45a; /* amber navigation-light glow */ /* In dark mode the PayPal iframe stays white (its own styling) — keep our surround matching the document, not forcing white. */ --eh-color-input-surface: var(--eh-color-paper-raised); --eh-shadow-flat: 0 0 0 1px var(--eh-color-rule); --eh-shadow-lift: 0 1px 2px rgba(0, 0, 0, 0.4), 0 6px 18px rgba(0, 0, 0, 0.35); --eh-shadow-panel: 0 1px 0 0 var(--eh-color-rule-strong), 0 14px 34px rgba(0, 0, 0, 0.45); --eh-grain-url: url("data:image/svg+xml;utf8,"); } /* — Dark theme: auto via OS preference, only if user has not explicitly chosen light — */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --eh-color-paper: #0e1f30; --eh-color-paper-raised: #16324d; --eh-color-paper-edge: #1a3a5c; --eh-color-ink: #f4ead0; --eh-color-ink-soft: #d6c79c; --eh-color-ink-muted: #9eacbf; --eh-color-brass: #e4614f; --eh-color-brass-dark: #b53a2c; --eh-color-brass-soft: #3a1814; --eh-color-oxblood: #e4614f; --eh-color-oxblood-dim: #b53a2c; --eh-color-navy: #5578a0; --eh-color-navy-deep: #0a1723; --eh-color-sage: #7aa87a; --eh-color-chrome: #e5e0d2; --eh-color-panel: #0a1723; --eh-color-panel-text: #f4ead0; --eh-color-rule: rgba(244, 234, 208, 0.14); --eh-color-rule-strong: rgba(244, 234, 208, 0.30); --eh-color-rule-brass: rgba(228, 97, 79, 0.55); --eh-color-focus: #f0c45a; --eh-color-input-surface: var(--eh-color-paper-raised); --eh-shadow-flat: 0 0 0 1px var(--eh-color-rule); --eh-shadow-lift: 0 1px 2px rgba(0, 0, 0, 0.4), 0 6px 18px rgba(0, 0, 0, 0.35); --eh-shadow-panel: 0 1px 0 0 var(--eh-color-rule-strong), 0 14px 34px rgba(0, 0, 0, 0.45); --eh-grain-url: url("data:image/svg+xml;utf8,"); } }