/* ========================================================================== FIND YOUR LAND — DESIGN TOKENS (Phase 1 deliverable, for review) -------------------------------------------------------------------------- A single source of truth for the visual language. Aesthetic benchmark: CBRE / JLL / Knight Frank / Savills — corporate-premium real estate. Direction: deep NAVY ink primary, CHARCOAL neutrals, clean WHITE surfaces, one restrained GOLD accent, Inter type, disciplined 4/8 spacing. NOTE: This file is NOT wired into the theme yet. It is presented for review. In Phase 2 it gets imported first (before component CSS) so every component and page consumes these variables. Nothing else has been touched. ========================================================================== */ :root { /* Force a light interface — disables Chrome/Android "Auto Dark Mode" from darkening the site for users whose browser/OS is in dark mode. */ color-scheme: only light; /* ---------------------------------------------------------------------- 1. BRAND RAMPS (raw scales — do not use directly in components; use the SEMANTIC tokens in §2 instead) ---------------------------------------------------------------------- */ /* Navy (primary brand ink) */ --navy-950: #06101F; /* near-black navy — top headers / footer */ --navy-900: #0A1A2F; /* primary ink, headings */ --navy-800: #0E2540; /* primary action default */ --navy-700: #143356; /* primary action hover */ --navy-600: #1E4B7A; /* links / interactive navy */ --navy-500: #2E6296; --navy-100: #E7ECF3; /* navy-tinted soft fill */ --navy-050: #F3F6FA; /* Charcoal / neutral gray (text + UI) */ --gray-950: #0E1726; --gray-800: #1F2A3A; --gray-700: #3D4757; /* body text */ --gray-500: #6B7686; /* muted text */ --gray-400: #97A1AF; --gray-300: #CDD4DE; /* strong borders */ --gray-200: #E3E7ED; /* default borders */ --gray-100: #EEF1F5; /* surface-3 */ --gray-050: #F7F8FA; /* surface-2 */ /* Gold (single accent — use sparingly: CTAs, highlights, awards) */ --gold-600: #A8883A; /* accent hover */ --gold-500: #C2A14D; /* accent default (refined brass, not yellow) */ --gold-200: #E8DCB6; /* accent soft fill */ --gold-050: #FBF6E9; /* ---------------------------------------------------------------------- 2. SEMANTIC COLOR TOKENS (use these everywhere) ---------------------------------------------------------------------- */ --color-primary: var(--navy-900); /* brand ink */ --color-primary-strong: var(--navy-950); --color-action: var(--navy-800); /* primary buttons */ --color-action-hover: var(--navy-700); --color-link: var(--navy-600); --color-accent: var(--gold-500); /* the one accent */ --color-accent-hover: var(--gold-600); --color-accent-soft: var(--gold-050); --color-on-accent: #2A2204; /* text on gold */ --color-bg: #FFFFFF; /* page background */ --color-surface: #FFFFFF; /* cards, sheets */ --color-surface-2: var(--gray-050); /* alt sections */ --color-surface-3: var(--gray-100); /* wells, image bg */ --color-text: var(--gray-950); /* primary text */ --color-body: var(--gray-700); /* paragraphs */ --color-muted: var(--gray-500); /* secondary/captions */ --color-on-dark: #FFFFFF; /* text on navy */ --color-on-dark-muted: rgba(255,255,255,.72); --color-border: var(--gray-200); --color-border-strong: var(--gray-300); --color-ring: var(--navy-600); /* focus ring */ /* Functional / status (always pair with an icon, never color-only) */ --color-success: #1B7F5C; --color-success-soft: #E6F4EE; --color-warning: #B7791F; --color-warning-soft: #FBF1DD; --color-danger: #C0392B; --color-danger-soft: #FBEAE7; --color-info: var(--navy-600); --color-info-soft: var(--navy-050); /* ---------------------------------------------------------------------- 3. TYPOGRAPHY System face: Inter (UI + body). Display uses Inter at heavy weight with tight tracking — the neo-grotesque, corporate look. Alt body option: "DM Sans". Numerals: tabular for prices/specs. ---------------------------------------------------------------------- */ --font-display: "Inter", "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; /* Type scale (mobile → fluid). Line-heights tuned per role. */ --fs-hero: clamp(2.5rem, 1.6rem + 4.5vw, 4.5rem); /* 40 → 72 */ --fs-h1: clamp(2rem, 1.5rem + 2.2vw, 2.75rem); /* 32 → 44 */ --fs-h2: clamp(1.625rem, 1.3rem + 1.4vw, 2.125rem);/* 26 → 34 */ --fs-h3: 1.5rem; /* 24 */ --fs-h4: 1.25rem; /* 20 */ --fs-body-lg: 1.125rem; /* 18 */ --fs-body: 1rem; /* 16 (min body) */ --fs-body-sm: 0.875rem; /* 14 */ --fs-caption: 0.8125rem; /* 13 */ --fs-label: 0.75rem; /* 12 */ --lh-tight: 1.12; /* hero / h1 */ --lh-heading: 1.25; /* h2–h4 */ --lh-body: 1.6; /* paragraphs */ --fw-regular: 400; --fw-medium: 500; --fw-semibold:600; --fw-bold: 700; --fw-black: 800; /* hero only */ --tracking-tight: -0.02em;/* display */ --tracking-normal: 0; --tracking-label: 0.08em; /* uppercase labels */ /* ---------------------------------------------------------------------- 4. SPACING (4px base, 8px rhythm) ---------------------------------------------------------------------- */ --space-1: 0.25rem; /* 4 */ --space-2: 0.5rem; /* 8 */ --space-3: 0.75rem; /* 12 */ --space-4: 1rem; /* 16 */ --space-5: 1.25rem; /* 20 */ --space-6: 1.5rem; /* 24 */ --space-8: 2rem; /* 32 */ --space-10: 2.5rem; /* 40 */ --space-12: 3rem; /* 48 */ --space-16: 4rem; /* 64 */ --space-20: 5rem; /* 80 */ --space-24: 6rem; /* 96 */ --section-y: clamp(3.5rem, 2rem + 6vw, 6rem); /* vertical section padding */ --container: 1240px; /* max content width */ --gutter: clamp(1rem, 0.5rem + 2vw, 2rem); /* ---------------------------------------------------------------------- 5. RADIUS ---------------------------------------------------------------------- */ --radius-sm: 6px; --radius-md: 10px; /* inputs, buttons */ --radius-lg: 14px; /* cards */ --radius-xl: 20px; /* hero panels, modals */ --radius-pill: 999px; /* ---------------------------------------------------------------------- 6. SHADOWS (cool navy-tinted, restrained / corporate) ---------------------------------------------------------------------- */ --shadow-xs: 0 1px 2px rgba(10,26,47,.06); --shadow-sm: 0 2px 8px rgba(10,26,47,.07); --shadow-md: 0 8px 24px rgba(10,26,47,.10); --shadow-lg: 0 18px 44px rgba(10,26,47,.14); --shadow-focus: 0 0 0 3px rgba(30,75,122,.28); /* ring */ /* ---------------------------------------------------------------------- 7. MOTION ---------------------------------------------------------------------- */ --ease-standard: cubic-bezier(.4, 0, .2, 1); --ease-out: cubic-bezier(.16, 1, .3, 1); --ease-in: cubic-bezier(.4, 0, 1, 1); --t-fast: 120ms; --t-base: 200ms; --t-slow: 320ms; /* ---------------------------------------------------------------------- 8. COMPONENT-LEVEL TOKENS ---------------------------------------------------------------------- */ /* Buttons */ --btn-height: 48px; --btn-height-sm: 38px; --btn-height-lg: 56px; --btn-padding-x: 1.5rem; --btn-radius: var(--radius-md); --btn-font-size: 0.9375rem; /* 15 */ --btn-font-weight: var(--fw-semibold); --btn-primary-bg: var(--color-action); --btn-primary-bg-hover: var(--color-action-hover); --btn-primary-fg: var(--color-on-dark); --btn-accent-bg: var(--color-accent); --btn-accent-fg: var(--color-on-accent); --btn-ghost-border: var(--color-border-strong); /* Cards */ --card-bg: var(--color-surface); --card-border: 1px solid var(--color-border); --card-radius: var(--radius-lg); --card-shadow: var(--shadow-sm); --card-shadow-hover: var(--shadow-lg); --card-pad: var(--space-5); --card-media-ratio: 4 / 3; /* Inputs */ --input-height: 48px; --input-radius: var(--radius-md); --input-border: 1px solid var(--color-border-strong); --input-bg: var(--color-surface); --input-focus-ring: var(--shadow-focus); --input-placeholder: var(--color-muted); /* Navigation */ --nav-height: 76px; --nav-bg: var(--color-surface); --nav-border: 1px solid var(--color-border); --nav-shadow-stuck: var(--shadow-md); --nav-link: var(--color-text); --nav-link-active: var(--color-primary); --topbar-bg: var(--navy-950); --topbar-fg: var(--color-on-dark-muted); /* Badges */ --badge-radius: var(--radius-pill); --badge-font-size: var(--fs-label); --badge-pad: 0.4rem 0.7rem; --badge-neutral-bg: var(--gray-100); --badge-neutral-fg: var(--gray-700); --badge-accent-bg: var(--gold-200); --badge-accent-fg: #6A5212; --badge-status-bg: rgba(255,255,255,.92); --badge-status-fg: var(--color-primary); /* Z-index scale */ --z-base: 0; --z-dropdown: 1000; --z-sticky: 1020; --z-header: 1030; --z-modal: 1050; --z-toast: 1080; } /* Respect reduced motion globally (timings collapse) */ @media (prefers-reduced-motion: reduce) { :root { --t-fast: 0.01ms; --t-base: 0.01ms; --t-slow: 0.01ms; } }