/* ========================================================================== Design tokens — single source of truth -------------------------------------------------------------------------- Warm, light, photography-forward. Real-estate register, not dark SaaS. Built from the ground up for this brand: cream backgrounds, clay accent, warm-tinted neutrals, a humanist sans, soft warm shadows. Nothing here is carried over from another product — every value is chosen for this site. Every color, radius, space, size, shadow, and transition used anywhere on the site MUST reference a token below. No hard-coded one-off values. ========================================================================== */ :root { /* ---------------------------------------------------------------------- 1A. COLOR — SHARED (identical in light and dark; theme-agnostic) -------------------------------------------------------------------------- These never change between themes. The brand accent is a constant pop in both; only its light washes (the per-theme tints, in 1B / 1C) differ. */ /* Brand accent — warm clay/terracotta. Buttons, highlights, active states. */ --color-accent: #C0613C; --color-accent-hover: #A8522F; --color-accent-active: #8F4527; --color-on-accent: #FFFFFF; /* text/icons on an accent fill. NOTE: white on clay is ~4.2:1 — passes AA only as large text, so CTA/button labels using it must be >=16px AND semibold/bold (large-text 3:1 rule). */ /* Functional — status colors, same hue in either theme. */ --color-success: #2F9E5B; --color-warning: #D98A0B; --color-error: #D64541; /* Focus ring (accessibility) — clay at low alpha, reads on both themes. */ --color-focus-ring: rgba(192, 97, 60, 0.45); /* Controls overlaid on photographic media (the before/after slider handle) keep a constant white surface + dark ink in BOTH themes — the photo beneath them does not change with the UI theme, so the control must not invert. */ --color-media-surface: #FFFFFF; --color-media-ink: #2A2520; /* ---------------------------------------------------------------------- 1B. COLOR — LIGHT MODE (the default theme) -------------------------------------------------------------------------- The original warm, cream palette. These are the defaults on :root; the dark theme (1C) overrides the SAME token names under [data-theme="dark"]. Every consumer references these names — only the values swap, never the names. */ color-scheme: light; /* Link — a muted slate-teal, dark enough to clear AA 4.5:1 on the cream page bg as inline text. A cool counterweight to the warm clay. */ --color-link: #1F6F78; --color-link-hover: #18585F; /* Accent washes — soft clay tints for callout backgrounds and borders. */ --color-accent-tint: #F7ECE4; /* soft clay wash — section/callout bg */ --color-accent-tint-2: #F0DBCE; /* slightly stronger wash, borders */ /* Backgrounds — warm off-whites, lightest to most raised. */ --color-bg-page: #FBF8F3; /* THE single page and section background (warm cream). */ --color-bg-chrome: #FDFCF8; /* lifted ~2.5% toward white — header/footer chrome. */ --color-bg-subtle: #F5EFE6; /* component elevation (hover fills, small panels). */ --color-bg-surface: #FFFFFF; /* cards, inputs, raised surfaces. */ --color-bg-sunken: #F2EADF; /* inset wells inside a component. */ /* Borders & dividers — warm neutrals. */ --color-border: #E7DECF; /* default hairline border */ --color-border-strong: #D8CCB8; /* emphasized border, focused inputs */ --color-divider: #F0E8DB; /* faint section divider */ /* Text — warm near-black through warm grays. */ --color-text-primary: #2A2520; /* headings, body */ --color-text-secondary: #6B6259; /* descriptions, supporting copy (AA on bg) */ --color-text-muted: #7C7268; /* meta, placeholders — large/non-essential text only. */ --color-text-disabled: #C6BFB4; --color-text-inverse: #FFFFFF; /* text on a dark / accent surface */ /* Decorative — faint blueprint grid line (identity header background). */ --grid-line: rgba(42, 39, 36, 0.045); /* Dot-grid texture inside the "why we built" box. Dark near-black at low alpha reads as a subtle dot on the light box. */ --provide-dot: color-mix(in srgb, var(--color-text-primary) 18%, transparent); } /* -------------------------------------------------------------------------- 1C. COLOR — DARK MODE (applied when ) -------------------------------------------------------------------------- A neutral dark canvas — true black/grey, no warm/brown tint — so the terracotta accent reads as the one warm note. Same token names, dark values; the shared accent + status colors (1A) carry over unchanged. The footer's "system" option resolves to this via JS (set data-theme="dark"). */ [data-theme="dark"] { color-scheme: dark; /* Link — brightened teal for contrast on the dark canvas. */ --color-link: #5FB8C0; --color-link-hover: #82CDD4; /* Accent washes — dark, warm clay-tinted panels (mirror of the light tints). */ --color-accent-tint: #2E2017; /* warm clay-tinted callout bg */ --color-accent-tint-2: #3E2C20; /* stronger wash, borders */ /* Backgrounds — neutral greys (no warm tint), darkest to most raised. Three+ distinct lightness steps so panels/floating boxes still read as raised. */ --color-bg-page: #101012; /* THE single page and section background (near-black). */ --color-bg-chrome: #161618; /* lifted — header/footer chrome. */ --color-bg-subtle: #1A1A1C; /* component elevation (hover fills, small panels). */ --color-bg-surface: #1E1E20; /* cards, inputs, raised surfaces (lightest). */ --color-bg-sunken: #0A0A0B; /* inset wells inside a component (darkest). */ /* Borders & dividers — low-contrast neutral hairlines (white at low alpha). */ --color-border: rgba(255, 255, 255, 0.08); /* default hairline border */ --color-border-strong: rgba(255, 255, 255, 0.16); /* emphasized border, focused inputs */ --color-divider: rgba(255, 255, 255, 0.06); /* faint section divider */ /* Text — neutral off-white through greys (no warm tint). */ --color-text-primary: #F2F2F3; /* headings, body (not pure white) */ --color-text-secondary: #C8C8CB; /* descriptions, supporting copy */ --color-text-muted: #A0A0A3; /* meta, placeholders — large/non-essential text only. */ --color-text-disabled: #6E6E72; /* faint */ --color-text-inverse: #101012; /* text on a light / accent surface */ /* Decorative — neutral grid line so the blueprint grid reads on the dark canvas. */ --grid-line: rgba(255, 255, 255, 0.05); /* Dot-grid texture: a faint off-white dot is too weak on the dark box, so the dark theme carries it at a higher alpha to stay legible (more prominent). */ --provide-dot: color-mix(in srgb, var(--color-text-primary) 18%, transparent); /* Shadows — neutral black on the dark canvas (light mode keeps the warm ones). Higher alpha than light so depth still reads against the dark surfaces. */ --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.30); --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.35); --shadow-md: 0 6px 16px rgba(0, 0, 0, 0.40); --shadow-lg: 0 12px 28px rgba(0, 0, 0, 0.45); --shadow-xl: 0 24px 48px rgba(0, 0, 0, 0.50); } :root { /* ---------------------------------------------------------------------- 2. TYPOGRAPHY ---------------------------------------------------------------------- */ /* Families. One humanist sans sitewide (perf/SEO) — Hanken Grotesk reads warm and friendly, fitting the real-estate register without feeling SaaS. --font-display is split out so a warm serif could swap into headings later without touching markup. Swap the family here only. */ --font-sans: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif; --font-display: var(--font-sans); --font-mono: 'SFMono-Regular', ui-monospace, Menlo, Consolas, monospace; /* Type scale — rem-based, marketing range (12px → 60px hero). 1rem = 16px. */ --text-xs: 0.75rem; /* 12px — captions, legal fine print */ --text-sm: 0.875rem; /* 14px — meta, labels */ --text-base: 1rem; /* 16px — body default */ --text-lg: 1.125rem; /* 18px — lead paragraph, large body */ --text-xl: 1.25rem; /* 20px — small headings, card titles */ --text-2xl: 1.5rem; /* 24px — h3 */ --text-3xl: 1.875rem; /* 30px — h2 */ /* Large display sizes fluid-scale so the hero never overflows small screens (mobile is a stated ranking priority). min @ ~360px → max @ ~1200px. */ --text-4xl: clamp(1.75rem, 1.40rem + 1.6vw, 2.25rem); /* 28 → 36px */ --text-5xl: clamp(2.25rem, 1.70rem + 2.6vw, 3rem); /* 36 → 48px */ --text-6xl: clamp(2.50rem, 1.65rem + 3.7vw, 3.75rem); /* 40 → 60px */ /* Weights. */ --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; /* Line heights. */ --leading-tight: 1.1; /* large display headings */ --leading-snug: 1.25; /* headings */ --leading-normal: 1.5; /* body */ --leading-relaxed: 1.65; /* long-form prose, legal */ /* Letter spacing. */ --tracking-tight: -0.02em; /* large headings */ --tracking-normal: 0; --tracking-wide: 0.04em; /* small-caps eyebrow-free labels, buttons */ /* ---------------------------------------------------------------------- 3. SPACING (4px base unit, generous scale) ---------------------------------------------------------------------- */ --space-0: 0; --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.25rem; /* 20px */ --space-6: 1.5rem; /* 24px */ --space-8: 2rem; /* 32px */ --space-10: 2.5rem; /* 40px */ --space-12: 3rem; /* 48px */ --space-16: 4rem; /* 64px */ --space-20: 5rem; /* 80px */ --space-24: 6rem; /* 96px */ --space-32: 8rem; /* 128px */ /* ---------------------------------------------------------------------- 4. LAYOUT ---------------------------------------------------------------------- */ --container-max: 1200px; /* main content max width */ --container-narrow: 760px; /* prose / legal column */ --container-wide: 1320px; /* full-bleed feature rows */ /* ---------------------------------------------------------------------- 5. RADIUS (generous rounding, warm and approachable) ---------------------------------------------------------------------- */ --radius-sm: 4px; /* inputs, small chips */ --radius-md: 8px; /* buttons, small cards */ --radius-lg: 12px; /* cards, panels */ --radius-xl: 16px; /* feature cards, media frames */ --radius-2xl: 24px; /* hero panels, large media */ --radius-pill: 9999px; /* pill buttons, tags */ /* ---------------------------------------------------------------------- 6. SHADOWS (warm-tinted, soft — light photography site) ---------------------------------------------------------------------- */ --shadow-xs: 0 1px 2px rgba(42, 37, 32, 0.06); --shadow-sm: 0 2px 8px rgba(42, 37, 32, 0.06); --shadow-md: 0 6px 16px rgba(42, 37, 32, 0.08); --shadow-lg: 0 12px 28px rgba(42, 37, 32, 0.10); --shadow-xl: 0 24px 48px rgba(42, 37, 32, 0.12); /* Accent-tinted lift for primary CTAs. */ --shadow-accent: 0 8px 20px rgba(192, 97, 60, 0.22); /* ---------------------------------------------------------------------- 7. MOTION ---------------------------------------------------------------------- */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-spring: cubic-bezier(0.34, 1.40, 0.64, 1); /* gentle overshoot for lifts */ --duration-fast: 150ms; --duration-base: 200ms; --duration-slow: 300ms; --transition-base: all var(--duration-base) var(--ease-out); /* ---------------------------------------------------------------------- 8. Z-INDEX ---------------------------------------------------------------------- */ --z-base: 0; --z-raised: 10; --z-sticky: 100; /* sticky header */ --z-overlay: 1000; /* backdrops */ --z-modal: 1100; --z-toast: 1200; /* ---------------------------------------------------------------------- 9. ICONS (inline Lucide SVGs as mask tokens) -------------------------------------------------------------------------- Used via `mask-image` so the icon inherits the host element's currentColor and em-sizing — it always matches the text size and color it sits in. The stroke color inside the SVG is irrelevant (a mask uses alpha coverage). */ /* Lucide arrow-up-right — the slanted up-and-to-the-right arrow. Drives the button hover arrow sitewide. */ --icon-arrow-up-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 7h10v10'/%3E%3Cpath d='M7 17 17 7'/%3E%3C/svg%3E"); /* Lucide chevron-down, baked to the muted text color, for native