/* ============================================================ VYNE REALTOR · DESIGN TOKENS Single responsibility: design tokens (custom properties) only. No component styles live here. Mood: "quiet money" - editorial, warm, expensive. BRIGHT + airy: soft near-white surfaces, deep ink text, one decisive accent. (Reskinned 2026-06 to the bright editorial reference. Collapsed 2026-06 from a dual-package system to ONE luxury palette.) Fonts are loaded via in each page : Fraunces - serif display (headings, big editorial type) Schibsted Grotesk - grotesk body (UI + reading text) IBM Plex Mono - eyebrow / label / index accents ONE luxury palette lives on :root. CTA fills are near-black ink (--accent); champagne gold carries the foreground/decorative accents. To re-skin for a brokerage color, edit --accent and its derived tokens (--accent-text, --accent-press, --accent-soft, --accent-line, --ring, --shadow-accent, --glow, --hero-light, the --media-tint) here in one place, OR set window.VYNE.accent for a one-line --accent override at runtime. Components MUST read var(--accent), var(--bg) etc. - never hardcode. ============================================================ */ :root { /* ---- Type families ---- */ --font-display: "Fraunces", "Times New Roman", serif; --font-body: "Schibsted Grotesk", system-ui, -apple-system, sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", monospace; /* ---- Type scale (mobile-first, fluid via clamp) ---- Minor-third-ish progression; display sizes scale with viewport. */ --step--1: clamp(0.78rem, 0.76rem + 0.10vw, 0.84rem); /* fine print */ --step-0: clamp(0.98rem, 0.95rem + 0.15vw, 1.06rem); /* body */ --step-1: clamp(1.18rem, 1.10rem + 0.40vw, 1.42rem); /* lead */ --step-2: clamp(1.45rem, 1.28rem + 0.85vw, 2.00rem); /* h3 */ --step-3: clamp(1.85rem, 1.55rem + 1.50vw, 2.90rem); /* h2 */ --step-4: clamp(2.40rem, 1.85rem + 2.75vw, 4.30rem); /* h1 */ --step-5: clamp(3.10rem, 2.10rem + 5.00vw, 6.80rem); /* display / hero */ /* ---- Type detail ---- */ --leading-tight: 1.04; /* large display headings */ --leading-snug: 1.18; /* sub-headings */ --leading-body: 1.7; /* generous reading line-height */ --tracking-display: -0.03em; /* tight tracking on big type */ --tracking-head: -0.02em; --tracking-body: -0.005em; --tracking-label: 0.16em; /* mono eyebrow letter-spacing */ --weight-body: 400; --weight-medium: 500; --weight-bold: 700; /* ---- Spacing scale (8px base, intentional steps) ---- */ --space-2xs: 0.25rem; /* 4 */ --space-xs: 0.5rem; /* 8 */ --space-sm: 0.75rem; /* 12 */ --space-md: 1rem; /* 16 */ --space-lg: 1.5rem; /* 24 */ --space-xl: 2.5rem; /* 40 */ --space-2xl: 4rem; /* 64 */ --space-3xl: 6rem; /* 96 */ --space-4xl: 9rem; /* 144 - section rhythm on desktop */ /* ---- Layout ---- */ --container: 76rem; /* max content width */ --container-tight: 54rem; /* reading column */ --gutter: clamp(1.25rem, 5vw, 3rem); /* ---- Radii ---- */ --radius-xs: 4px; --radius-sm: 8px; --radius-md: 14px; --radius-lg: 22px; --radius-pill: 999px; /* ---- Motion ---- */ --ease: cubic-bezier(.2, .7, .2, 1); --ease-out: cubic-bezier(.16, 1, .3, 1); --dur: 240ms; --dur-fast: 140ms; --dur-slow: 520ms; /* ---- Hairline / line weight ---- */ --hairline: 1px; /* ============================================================ LUXURY PALETTE (single, only version - bright + airy, red accent) ============================================================ */ /* Surfaces: BRIGHT base → elevated → floating. A soft warm off-white ground, a slightly cooler/cleaner elevated surface for cards, and a faintly tinted deep surface for inset wells. */ --bg: #f6f4ef; /* warm off-white page ground */ --surface: #ffffff; /* elevated card/panel surface */ --surface-2: #efece4; /* recessed well / input field */ --line: #e6e2d8; /* subtle hairline on the ground */ --line-strong: #d8d3c6; /* stronger hairline on white cards */ /* Text: deep ink family on light. Contrast (WCAG AA, against the lightest surface text sits on, #ffffff): --text #10151c 16.8:1 ✓ AAA --text-muted #535b66 6.6:1 ✓ AA --text-faint #6b7280 4.9:1 ✓ AA */ --text: #10151c; /* deep charcoal ink */ --text-muted: #535b66; /* mid slate */ --text-faint: #6b7280; /* faint slate (still AA on white) */ /* Accent: luxury-minimalist split (reskinned 2026-07-02). FILLS are near-black ink - CTAs read as quiet authority, not signal. FOREGROUND accents are champagne gold, used sparingly: eyebrows, hairlines, hovers. --accent-text (#82683a) is the darkened gold for running text - 5.0:1 on --bg, AA. Decorative gold (borders, washes, glows) uses the brighter #b3925a via the rgba tokens below. */ --accent: #17181a; /* near-black CTA fill */ --accent-text: #8a6a34; /* deep champagne gold as foreground text - 4.6:1 on bg, AA */ --accent-press: #000000; /* pressed - full black */ --accent-soft: rgba(179, 146, 90, 0.10); --accent-line: rgba(179, 146, 90, 0.32); --on-accent: #ffffff; /* Focus ring tinted to the gold accent */ --ring: rgba(130, 104, 58, 0.50); /* Layered, SOFT shadows for light surfaces. Cool neutral ink at low opacity - lift + depth, never a heavy dark glow. */ --shadow-sm: 0 1px 2px rgba(16, 21, 28, 0.05), 0 2px 6px rgba(16, 21, 28, 0.05); --shadow-md: 0 1px 2px rgba(16, 21, 28, 0.05), 0 6px 16px rgba(16, 21, 28, 0.07), 0 1px 0 rgba(255, 255, 255, 0.6) inset; --shadow-lg: 0 2px 6px rgba(16, 21, 28, 0.06), 0 12px 30px rgba(16, 21, 28, 0.09), 0 30px 60px rgba(16, 21, 28, 0.08), 0 1px 0 rgba(255, 255, 255, 0.7) inset; --shadow-accent: 0 6px 18px rgba(16, 21, 28, 0.16), 0 1px 3px rgba(16, 21, 28, 0.14); /* Atmospheric glow for hero/section backgrounds (whisper-soft on light) */ --glow: radial-gradient(60% 60% at 20% 0%, rgba(179, 146, 90, 0.06), transparent 70%), radial-gradient(50% 50% at 90% 20%, rgba(140, 112, 62, 0.05), transparent 70%); /* Neutral media-placeholder tones (behind real photography). Light, warm, edge-free so an empty card reads as a soft tile, not a dark box. */ --media-1: linear-gradient(160deg, #efe9df 0%, #e4ddd0 70%); --media-2: linear-gradient(160deg, #ece4d8 0%, #e0d7c8 70%); --media-3: linear-gradient(160deg, #f0ebe2 0%, #e6dfd3 70%); --media-tint: rgba(179, 146, 90, 0.07); /* Hero accent-light strength (consumed by .v-hero__light). */ --hero-light: rgba(179, 146, 90, 0.12); } /* ---- Reduced motion: neutralize duration tokens ---- */ @media (prefers-reduced-motion: reduce) { :root { --dur: 0ms; --dur-fast: 0ms; --dur-slow: 0ms; } }