/* ========================================================================== Window Scene — Design tokens Exact values from design_handoff_window_scene_site/README.md (Design tokens). Do not introduce a second accent. --accent-deep belongs to the primary CTA. ========================================================================== */ :root { color-scheme: light; /* --- Color: grounds & surfaces --- Editorial-warm pass (user-approved deviation from the spec's cool paper): warm sunlit paper under cool slate-navy ink — the classic premium-print pairing (navy-on-cream). Ink, accent, and deep bands stay cool for punch. */ --bg: #f4f2ec; /* Page background (warm sunlit paper) */ --bg-raised: #ece8df; /* Alternating section bands (warm) */ --surface: #fffdfa; /* Cards, form fields, idle list rows (warm white) */ --bg-deep: #101f3d; /* Mission line, conversion band, investor band */ --on-deep: #e9eff8; /* Text on the deep band */ --on-deep-quiet: #a5c6ef; /* Eyebrows on the deep band (azure family) */ /* --- Color: lines & numerals (warmed to sit on paper) --- */ --line: #ddd6c9; /* Hairline dividers, section borders */ --line-strong: #cbc3b2; /* Field borders, secondary buttons */ --numeral: #cabfa9; /* Large step numerals (01/02/03) */ /* --- Color: ink --- */ --ink: #12233a; /* Headings, primary text (deep slate-navy) */ --ink-body: #46566e; /* Body copy */ --ink-muted: #55647b; /* Secondary body */ --ink-quiet: #7f8b9c; /* Captions, meta, field labels */ --ink-faint: #808c9f; /* Labels, legal (14px+ only) */ /* --- Color: the single accent (CTA + active states + links) --- Clean azure. Two tones for accessibility: a brighter azure fills the CTA (white text passes AA, and it pops against the navy bands), a deeper azure handles links/eyebrows as text on the pale paper (where bright azure fails). Navy (--bg-deep) remains the company/brand blue. */ --accent: #1d4e8f; /* Links, eyebrows, text accents on paper (AA) */ --accent-deep: #2a6fc0; /* Primary CTA fill, active borders (clean azure) */ --accent-deep-hover: #225a9e; /* CTA hover */ --on-accent: #f7f9fd; /* Text on the CTA */ --wash-select: #d3e2f5; /* Selection highlight (azure-tinted) */ /* --- Placeholder stripes (135deg at 12px). No real photography exists. --- Warm stone so empty slots read as intentional paper swatches, not "broken". */ --placeholder-a: #e7e1d4; --placeholder-b: #ded7c7; --placeholder-before-a: #d9d7d0; /* warm "before photo" — the only warm tone */ --placeholder-before-b: #d1cfc7; --placeholder-after-a: #c3d5ea; /* cool "after photo" */ --placeholder-after-b: #b8cbe3; /* --- Typography families (self-host target; interim webfont link in ) --- */ --font-display: "Newsreader", Georgia, "Times New Roman", serif; --font-ui: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", "Menlo", monospace; /* --- Spacing (4px base) --- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px; --space-8: 32px; --space-12: 48px; --section-block: clamp(56px, 9vw, 120px); /* section vertical rhythm */ --section-inline: clamp(16px, 4vw, 64px); /* page gutter */ --card-pad: clamp(20px, 3vw, 36px); --grid-gap: clamp(20px, 3vw, 40px); /* --- Radius: 0 everywhere except the 54px reveal handle --- */ --radius: 0; --handle-size: 54px; /* --- Shadow: exactly one, on the handle / hero frame / scene frame / wishlist card --- */ --shadow: 0 22px 60px -34px rgba(10, 24, 45, 0.6); /* --- Content measures --- */ --measure-page: 1200px; }