:root { /* Primary Color Palette */ --primary-color: #333F48; /* Charcoal Grey for headings */ --primary-dark: #1F2E2E; /* Dark Charcoal for darker elements */ --secondary-color: #895348; /* Rust Red for links/accents */ --tertiary-color: #C9A053; /* Antique Gold for special elements */ /* Background Colors */ --bg-main: #FFFFF0; /* Ivory White main background */ --bg-alt: #FFFFF0; /* Ivory White for cards */ --bg-footer: #708090; /* Slate Grey for footer */ /* Text Colors */ --text-dark: #333F48; /* Charcoal Grey for body text */ --text-light: #FFFFF0; /* Ivory White for dark backgrounds */ --text-medium: #4a5966; /* Slightly lighter Charcoal Grey for muted text */ /* Accent Colors */ --accent-primary: #895348; /* Rust Red accent */ --accent-secondary: #2A3F3F; /* Dark Teal */ --accent-tertiary: #C9A053; /* Antique Gold */ /* Button Colors */ --btn-primary-bg: #895348; /* Rust Red background */ --btn-primary-text: #FFFFF0; /* Ivory text */ --btn-primary-hover: #C9A053; /* Antique Gold hover */ --btn-secondary-bg: #2A3F3F; /* Dark Teal background */ --btn-secondary-text: #FFFFF0;/* Ivory text */ --btn-secondary-hover: #708090;/* Slate Grey hover */ /* Border Colors */ --border-light: #d0d5d9; /* Light border */ --border-medium: #708090; /* Slate Grey border */ /* Spacing System */ --spacing-xxs: 0.25rem; /* 4px */ --spacing-xs: 0.5rem; /* 8px */ --spacing-sm: 1rem; /* 16px */ --spacing-md: 2rem; /* 32px */ --spacing-lg: 4rem; /* 64px */ --spacing-xl: 6rem; /* 96px */ --spacing-xxl: 8rem; /* 128px */ /* Typography */ --font-primary: 'Cinzel', serif; --font-body: 'Lato', sans-serif; --font-size-xs: 14px; /* sitewide readable floor (was 12px) */ --font-size-sm: 0.9rem; /* 14px */ --font-size-base: 1rem; /* 16px */ --font-size-md: 1.2rem; /* 19px */ --font-size-lg: 1.5rem; /* 24px */ --font-size-xl: 2rem; /* 32px */ --font-size-xxl: 3rem; /* 48px */ --font-size-hero: 4rem; /* 64px */ --line-height-tight: 1.2; --line-height-normal: 1.6; --line-height-loose: 1.8; /* Shadows */ --shadow-sm: 0 3px 10px rgba(0, 0, 0, 0.05); --shadow-md: 0 5px 15px rgba(0, 0, 0, 0.08); --shadow-lg: 0 15px 40px rgba(0, 0, 0, 0.12); /* Transitions */ --transition-fast: 0.3s ease; --transition-normal: 0.5s ease; --transition-slow: 0.7s cubic-bezier(0.22, 1, 0.36, 1); /* Borders */ --radius-sm: 5px; --radius-md: 8px; --radius-lg: 12px; --radius-round: 50%; /* Z-index layers */ --z-below: -1; --z-normal: 1; --z-above: 10; --z-header: 100; --z-modal: 1000; --z-tooltip: 1500; --z-highest: 9999; /* Breakpoints */ --breakpoint-xs: 576px; --breakpoint-sm: 768px; --breakpoint-md: 992px; --breakpoint-lg: 1200px; --breakpoint-xl: 1400px; /* Container max widths */ --container-xs: 540px; --container-sm: 720px; --container-md: 960px; --container-lg: 1140px; --container-xl: 1320px; /* ===================================================================== ETERNAL ROAM — DESIGN FOUNDATION TOKENS (Claude Design v1) --------------------------------------------------------------------- Additive layer. Legacy tokens above remain authoritative for existing pages and components. New components opt in via the `--er-*` tokens and `.er-*` primitives below. Do not remove legacy tokens until existing CSS is migrated in a later phase. ===================================================================== */ /* Surfaces — warm limestone / parchment / paper */ --er-paper: #FBF7EC; --er-ivory: #F6F1E4; --er-limestone: #ECE5D5; --er-parchment: #E0D5BB; --er-stone: #C9BFA8; /* Ink — primary text + softened tiers */ --er-ink: #1F1B14; --er-ink-2: #3A332A; --er-ink-3: #6E6555; --er-ink-4: #8C8472; /* Accents — clay primary, olive/gold/blue-gray sparingly */ --er-clay: #B36A45; --er-clay-deep: #8E4E2E; --er-olive: #6E724B; --er-gold: #A4823F; --er-bluegray: #6E7B82; /* Rules — hairline dividers */ --er-rule-soft: rgba(31, 27, 20, 0.07); --er-rule: rgba(31, 27, 20, 0.12); --er-rule-hair: rgba(31, 27, 20, 0.18); /* Typography stacks --------------------------------------------------------------------- Spectral / DM Sans / DM Mono are the target families. Until those font files are loaded (see follow-up font task), each stack falls back through robust system serifs/sans/monos. Adding the primitives now is safe; rendering simply uses the fallback. */ --er-serif: 'Spectral', 'GT Sectra', Georgia, 'Times New Roman', serif; --er-sans: 'DM Sans', 'Söhne', system-ui, -apple-system, BlinkMacSystemFont, sans-serif; --er-mono: 'DM Mono', ui-monospace, Menlo, Consolas, monospace; /* Type scale — editorial display + body */ --er-fs-display: clamp(2.5rem, 4.5vw, 4rem); /* atlas hero */ --er-fs-h1: clamp(2rem, 3.4vw, 2.75rem); --er-fs-h2: clamp(1.5rem, 2.4vw, 2rem); --er-fs-h3: 22px; /* was 1.375rem — rem is 10px root here, not 16px */ --er-fs-h4: 18px; /* was 1.125rem — rem is 10px root here, not 16px */ --er-fs-lede: 19px; /* was 1.1875rem — rem is 10px root here, not 16px */ --er-fs-body: 16px; /* was 1rem — rem is 10px root here, not 16px */ --er-fs-small: 15px; /* was 0.9375rem — rem is 10px root here, not 16px */ --er-fs-meta: 14px; /* mono metadata — was 13px, floored */ --er-fs-prose: 16px; --er-fs-prose-lg: 17px; --er-fs-card: 15px; --er-fs-ui: 14px; --er-fs-ui-sm: 14px; /* was 13px, floored */ --er-fs-kicker: 14px; /* short uppercase section/eyebrow labels — was 12.5px, floored. NOT for full-sentence kickers; those use --er-fs-deck below. */ --er-fs-caption: 12px; /* image credits / legal source attribution ONLY — never for editorial or UI text */ /* Sitewide minimum readable font-size for real microcopy (source/status labels, confidence chips, sign-in text, helper copy, small pills). Use this instead of a one-off px value whenever text below it is reported as too small. The only intentional exceptions are image credits, legal source attribution, and unavoidable map/third-party attribution. */ --er-fs-floor: 14px; /* Editorial floor: helper/deck copy, homepage kickers, quiz helper text, card descriptions, parent-page explanatory copy. Never use --er-fs-floor for this content — 14px is a metadata size, not a reading size. */ /* Bricks core CSS sets html{font-size:62.5%} (10px root) — rem is NOT 16px on this site. Every --er-fs-* token in this file uses absolute px for exactly this reason; do the same for any token added here. */ --er-fs-deck: 16px; --er-fs-deck-lg: 17px; /* desktop step-up for deck copy */ --er-lh-display: 1.1; --er-lh-heading: 1.2; --er-lh-body: 1.6; --er-lh-tight: 1.35; --er-lh-prose: 1.68; --er-lh-card: 1.55; --er-tracking-meta: 0.14em; /* Spacing scale — px-named for clarity */ --er-space-4: 0.25rem; --er-space-8: 0.5rem; --er-space-12: 0.75rem; --er-space-16: 1rem; --er-space-24: 1.5rem; --er-space-32: 2rem; --er-space-48: 3rem; --er-space-64: 4rem; --er-space-96: 6rem; /* Container + measure */ --er-container: 1280px; --er-container-wide: 1440px; --er-measure: 62ch; /* Border radii */ --er-r-sm: 4px; --er-r-md: 6px; --er-r-lg: 10px; --er-r-pill: 999px; /* Shadows — restrained editorial */ --er-shadow-card: 0 1px 0 rgba(31, 27, 20, 0.04), 0 18px 40px -28px rgba(31, 27, 20, 0.18); --er-shadow-modal: 0 30px 60px -30px rgba(31, 27, 20, 0.32); /* Image treatment ratios */ --er-ratio-place: 3 / 2; /* default */ --er-ratio-saint: 4 / 5; /* portraits */ --er-ratio-route: 16 / 9; /* routes + city hubs */ }