/* ============================================================================ Corrum Capital Management — "The Skyline" — concept token overrides. Pure token declarations only (no component rules in this file — that is what makes it a second compiled-tokens layer, same status as tokens.css). Loaded AFTER tokens.css and BEFORE styles.css. Every component rule in styles.css consumes these exclusively via var(--*) — no raw hex/rgb there. ========================================================================== */ :root { /* ---- ONE chromatic hue: Corrum plum. No second hue anywhere on this page. */ --color-brand-primary: #593160; --color-brand-accent: #3F2145; /* same hue family — never a contrasting hue */ --color-plum: #593160; --color-plum-dark: #3F2145; --color-plum-mid: #7C577C; --color-tint: #CCBDCA; --color-wash: #EDE7EC; --color-plum-band: rgba(63, 33, 69, 0.80); /* translucent — hero band only, never solid */ /* ---- neutrals, warm-biased per the art-direction palette ---- */ --color-neutral-0: #FFFFFF; --color-neutral-50: #F7F1F2; /* warm paper */ --color-neutral-200: #CCBDCA; /* tint */ --color-neutral-500: #4A4550; /* body ink */ --color-neutral-800: #221E24; /* strong ink */ --color-neutral-950: #17131A; --color-on-plum: #FFFFFF; /* ---- kit semantic contract, re-pointed at the above ---- */ --semantic-bg: var(--color-neutral-50); --semantic-surface: var(--color-neutral-0); --semantic-ink: var(--color-neutral-800); --semantic-ink-muted: var(--color-neutral-500); --semantic-rule: var(--color-tint); --semantic-action: var(--color-plum); --semantic-signal: var(--color-plum-dark); --semantic-inverse-bg: var(--color-plum-dark); --semantic-inverse-ink: #FCF9FB; --semantic-inverse-rule: rgba(252, 249, 251, 0.28); --semantic-inverse-muted: rgba(252, 249, 251, 0.72); /* ---- header + hero surface tokens (component rules reference these, never a literal) */ --color-header-scrolled-bg: rgba(255, 255, 255, 0.96); --hero-scrim-near: rgba(23, 14, 24, 0.18); --hero-scrim-mid: rgba(23, 14, 24, 0.42); --hero-scrim-far: rgba(23, 14, 24, 0.66); /* ---- type families (real fallback stacks; Google Fonts link in ) Fraunces (variable, opsz axis) for display, Source Sans 3 for body — kept deliberately distinct from the sibling concept's EB Garamond. ---- */ --font-display: 'Fraunces', Cambria, Georgia, 'Times New Roman', serif; --font-body: 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; /* ---- type scale — ratio 1.5, base 17px, declared as readable px rules ---- */ --fs-0: 13px; /* caption / eyebrow / legal floor (>=12px gate) */ --fs-micro: 10px; /* below-scale exception: wordmark subtitle + dropdown caret glyph, not a named step */ --fs-1: 17px; /* body base */ --fs-2: 25px; /* lead paragraph / sub-heading */ --fs-3: 38px; /* section heading */ --fs-4: 57px; /* display heading */ --fs-5: 86px; /* hero-scale display */ --line-height-body: 1.5; --line-height-display: 1.1; --tracking-display: -0.02em; --tracking-caps: 0.08em; --measure-prose: 65ch; /* ---- spacing — 8pt grid (matches the client's own design-tokens.json) ---- */ --space-1: 4px; --space-2: 8px; --space-3: 16px; --space-4: 24px; --space-5: 32px; --space-6: 40px; --space-7: 64px; --space-8: 96px; --space-9: 128px; --radius-none: 0px; --radius-sm: 2px; --motion-duration-fast: 150ms; --motion-duration-base: 240ms; --motion-duration-slow: 600ms; --motion-duration-curtain: 1100ms; --motion-easing-standard: cubic-bezier(0.2, 0, 0, 1); --motion-easing-entrance: cubic-bezier(0, 0, 0.2, 1); --container-max: 1220px; --container-pad: clamp(var(--space-4), 5vw, var(--space-8)); }