/* ============================================================================ 214 Proximity — Design Tokens (single source of truth) ---------------------------------------------------------------------------- Do not hard-code raw values in components. Reference these variables. Palette is tuned from the brief's starting direction and contrast-checked; see design-system/tokens.json + style-guide §03 for ratios and roles. When the real photography arrives, RE-TUNE the primitives here and re-run the contrast checks — do not scatter overrides through components. ============================================================================ */ :root { /* ---- Primitive palette ------------------------------------------------- Warm, residential, Californian. Photography carries most of the color; the UI stays quiet. */ --214-ink: #11110F; /* warm near-black — primary text, dark surfaces */ --214-ink-2: #1C1B17; /* lifted dark surface for panels on dark */ --214-bone: #F3EFE8; /* warm off-white — primary surface */ --214-paper: #FAF8F4; /* lightest warm white — page background */ --214-concrete: #D3CCC2; /* muted warm grey — sunken fills, dividers */ --214-stone: #A79E92; /* mid warm grey — MUTED/decorative only, NOT text on light */ --214-olive: #686B59; /* muted vegetation — secondary text, passes AA on light */ --214-gold: #82672F; /* sampled from the front door — the single accent */ --214-gold-ink: #6E5426; /* darker gold — accent hover / pressed on light */ --214-gold-light: #D9A845; /* lightened gold — accent text on DARK surfaces */ --214-line: rgba(17, 17, 15, 0.16); /* hairline on light */ --214-line-strong:rgba(17, 17, 15, 0.28); --214-line-dark: rgba(243, 239, 232, 0.18); /* hairline on dark */ /* ---- Semantic surface + text (LIGHT is the default) -------------------- */ --color-bg: var(--214-paper); --color-surface: var(--214-bone); --color-surface-sunken:var(--214-concrete); --color-surface-dark: var(--214-ink); --color-text: var(--214-ink); /* ~17:1 on paper */ --color-text-muted: var(--214-olive); /* ~5.2:1 on paper — AA body */ --color-text-faint: var(--214-stone); /* ~2.5:1 — LARGE/decorative only, never body */ --color-text-on-dark: var(--214-bone); /* ~16:1 on ink */ --color-text-muted-on-dark: var(--214-concrete); --color-line: var(--214-line); --color-line-strong: var(--214-line-strong); /* ---- Accent ------------------------------------------------------------ */ --color-accent: var(--214-gold); /* ~5.0:1 on paper — AA text/links */ --color-accent-hover: var(--214-gold-ink); /* ~6.7:1 on paper */ --color-accent-on-dark:var(--214-gold-light);/* ~8.7:1 on ink */ /* ---- Focus ------------------------------------------------------------- */ --focus-ring: var(--214-ink); /* overridden inside .on-dark */ --focus-width: 2px; --focus-offset: 2px; /* ---- Typography families ---------------------------------------------- */ --font-display: "Instrument Serif", Georgia, "Times New Roman", serif; --font-body: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; /* ---- Fluid type scale (min @360px → max @1440px) ----------------------- */ --step-display-xl: clamp(3rem, 1.2rem + 8vw, 6.5rem); /* 48 → 104 */ --step-display: clamp(2.5rem, 1.5rem + 4.4vw, 4.25rem); /* 40 → 68 */ --step-h1: clamp(2.125rem, 1.4rem + 3.1vw, 3.5rem); /* 34 → 56 */ --step-h2: clamp(1.5rem, 1.18rem + 1.4vw, 2.25rem); /* 24 → 36 */ --step-h3: clamp(1.25rem, 1.09rem + 0.7vw, 1.625rem); /* 20 → 26 */ --step-body-lg: clamp(1.125rem,1.06rem + 0.28vw,1.25rem); /* 18 → 20 */ --step-body: 1rem; /* 16 */ --step-caption: 0.8125rem; /* 13 */ --step-fact: 0.6875rem; /* 11 label */ --step-nav: 0.9375rem; /* 15 */ /* ---- Line heights ------------------------------------------------------ */ --leading-tight: 1.02; /* display */ --leading-snug: 1.14; /* headings */ --leading-normal: 1.6; /* body */ --leading-relaxed: 1.7; /* long-form body-lg */ /* ---- Letter spacing ---------------------------------------------------- */ --tracking-display:-0.02em; --tracking-tight: -0.006em; --tracking-normal: 0; --tracking-fact: 0.12em; /* uppercase fact labels + nav */ --tracking-nav: 0.02em; /* ---- Measure (line length) -------------------------------------------- */ --measure: 66ch; /* body prose */ --measure-lg: 58ch; /* body-lg intro */ --measure-display: 20ch; /* editorial headlines */ /* ---- Spacing — 4px base scale (named by px) --------------------------- */ --space-4: 0.25rem; --space-8: 0.5rem; --space-12: 0.75rem; --space-16: 1rem; --space-20: 1.25rem; --space-24: 1.5rem; --space-32: 2rem; --space-40: 2.5rem; --space-48: 3rem; --space-64: 4rem; --space-80: 5rem; --space-96: 6rem; --space-128: 8rem; --space-160: 10rem; /* ---- Section rhythm (fluid vertical pacing) --------------------------- */ --section-y: clamp(3.5rem, 2.2rem + 5.5vw, 8rem); --section-y-tight: clamp(2.5rem, 1.8rem + 3vw, 4.5rem); /* ---- Layout ------------------------------------------------------------ */ --container-max: 1280px; --container-wide: 1480px; /* full-bleed cap */ --container-text: 44rem; /* editorial reading column */ --gutter: clamp(1.25rem, 0.6rem + 3vw, 3.5rem); --grid-cols: 12; --grid-gap: clamp(1rem, 0.5rem + 1.6vw, 1.75rem); /* ---- Radius (editorial = mostly sharp) -------------------------------- */ --radius-0: 0; --radius-sm: 2px; --radius-md: 4px; --radius-pill: 999px; /* only for the sticky mobile CTA / small chips */ /* ---- Borders ----------------------------------------------------------- */ --border-hair: 1px solid var(--color-line); --border-strong: 1px solid var(--color-line-strong); /* ---- Elevation (used sparingly — no floating glass cards) -------------- */ --shadow-sticky: 0 -1px 0 var(--color-line), 0 -8px 24px rgba(17,17,15,0.08); --shadow-pop: 0 12px 40px rgba(17,17,15,0.14); /* ---- Motion ------------------------------------------------------------ */ --dur-micro: 160ms; /* hover, small state (range 120–220) */ --dur-ui: 300ms; /* nav, disclosure (range 220–400) */ --dur-reveal: 640ms; /* editorial reveal (range 500–850) */ --ease-standard: cubic-bezier(0.2, 0, 0, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --img-scale-max: 1.02; /* max image zoom */ --translate-max: 24px; /* max content displacement */ /* ---- Z-index scale ----------------------------------------------------- */ --z-base: 0; --z-sticky: 40; --z-nav: 50; --z-overlay: 60; --z-modal: 70; /* ---- Aspect ratios (image slots) -------------------------------------- */ --ar-hero: 16 / 10; --ar-landscape:3 / 2; --ar-portrait: 4 / 5; --ar-square: 1 / 1; --ar-pano: 21 / 9; } /* ============================================================================ Dark scope — apply .on-dark to a warm-dark section wrapper. This is NOT prefers-color-scheme: it is an intentional editorial device (warm dark/light contrast), used section by section. ============================================================================ */ .on-dark { --color-bg: var(--214-ink); --color-surface: var(--214-ink-2); --color-surface-sunken:#0C0C0A; --color-text: var(--214-bone); --color-text-muted: var(--214-concrete); --color-text-faint: var(--214-stone); --color-line: var(--214-line-dark); --color-line-strong: rgba(243, 239, 232, 0.30); --color-accent: var(--214-gold-light); /* ~8.7:1 on ink */ --color-accent-hover: #E4BC66; /* ~10.5:1 on ink */ --focus-ring: var(--214-bone); }