/* =============================================================================
CONZEPT website-v2 — design tokens (canonical)
Palette is the one hard carryover from ../website/library/css/tokens.css,
pinned by the site owner. Typography, spacing, and shapes are this
project's own, locked 2026-08-04 — see ../../DESIGN.md for the full system
and ../../.impeccable/shape-brief.md §3 for the decision history.
============================================================================= */
/* Font is loaded via in each page's , not @import here —
@import serializes the fetch chain (HTML → this file → @import → font),
a lets the browser discover and fetch it in parallel. */
:root {
/* ---- Palette (pinned, non-negotiable) ---------------------------------- */
--navy: #012334;
--navy-deep: #011a27;
--navy-raised: #062c3f;
--beige: #E3DBCF;
--beige-light: #faf8f4;
--beige-medium: #f1ece3;
--beige-dim: #c8c0b4;
--accent: #E07A5F;
--accent-dark: #c9613d;
/* Neither accent step clears 4.5:1 (large-text 3:1) on --offwhite —
measured 2.73:1 (--accent) / 3.69:1 (--accent-dark). This darker step is
for accent-as-text on the light/off-white panes only; --accent-dark still
covers hover states and accent-on-beige, which pass on their own. */
--accent-on-light: #a34f32;
--offwhite: #f6f6f6;
--light-grey: #ecf0f1;
--charcoal: #333333;
--white: #ffffff;
/* ---- Type -------------------------------------------------------------- */
--font: 'Libre Franklin', -apple-system, BlinkMacSystemFont, sans-serif;
/* ---- Shape --------------------------------------------------------------
See DESIGN.md "Shapes" — near-square throughout, no pill radii. */
--radius-sm: 3px;
--radius-md: 4px;
/* ---- Spacing scale (as used, not exhaustive) ---------------------------- */
--space-sm: 24px;
--space-md: 32px;
--space-lg: 56px;
--space-xl: 64px;
--space-2xl: 96px;
--space-hero: 140px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: var(--font); color: var(--beige); background: var(--navy); }
h1, h2 { font-family: var(--font); font-weight: 800; letter-spacing: -0.03em; }
h3 { font-family: var(--font); font-weight: 800; letter-spacing: -0.02em; }
section, nav { padding: var(--space-2xl) var(--space-xl); position: relative; overflow: hidden; }
.wrap { max-width: 1100px; margin: 0 auto; }
/* ---- Tonal panes — the system's primary source of depth (DESIGN.md
"Elevation & Depth"). Two adjacent sections should not share a pane. ---- */
.pane-navy { background: var(--navy); color: var(--beige); }
.pane-deep { background: var(--navy-deep); color: var(--beige); }
.pane-raised { background: var(--navy-raised); color: var(--beige); }
.pane-beige { background: var(--beige-light); color: var(--charcoal); }
.pane-medium { background: var(--beige-medium); color: var(--charcoal); }
.pane-offwhite { background: var(--offwhite); color: var(--charcoal); }
.pane-accent { background: var(--accent); color: var(--navy); }
.pane-beige h2, .pane-medium h2, .pane-offwhite h2 { color: var(--navy); }
.pane-beige p, .pane-medium p, .pane-offwhite p { color: rgba(51,51,51,0.82); }
@media (max-width: 900px) {
section, nav { padding: var(--space-lg) var(--space-sm); }
}