/* ============================================================ CF CASA Y CORAZÓN — Design Foundations Mediterranean overseas-real-estate brand. Colors + Type tokens (base + semantic). ============================================================ */ /* ---- Webfonts (best-match Google Fonts — see README font notes) ---- Display serif : Cormorant Garamond (logo wordmark / headings) UI sans : Montserrat (eyebrows, labels, body, UI) Script accent : Parisienne (taglines only) */ @import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600;700&family=Montserrat:wght@300;400;500;600;700&family=Parisienne&display=swap'); :root { /* ============================================================ COLOR — BASE PALETTE ============================================================ */ /* Brand gold / bronze — the wordmark & primary accent. Sampled from the original brand lettering (#997039 core). */ --gold-900: #6E521F; /* deepest bronze — text on cream */ --gold-700: #8A6B2E; /* deep gold — links, small text */ --gold-600: #A6843B; /* core brand gold */ --gold-500: #B89149; /* primary buttons / dividers */ --gold-400: #C9A867; /* hover / lighter accents */ --gold-300: #DCC591; /* tints, borders */ --gold-200: #ECDDBE; /* soft fills */ --gold-100: #F6ECD6; /* faint gold wash */ /* Ink — warm desaturated slate (subtitle / body copy). */ --ink-900: #1E282E; /* headlines on light */ --ink-700: #2E3A42; /* primary body ink */ --ink-500: #4A555C; /* secondary text */ --ink-400: #6B747A; /* muted / captions */ /* Sand / cream neutrals — backgrounds & surfaces. */ --sand-50: #FBF7EF; /* page background (warm white) */ --sand-100: #F7F1E7; /* default surface */ --sand-200: #EFE6D6; /* alt section / cards */ --sand-300: #E3D7C2; /* borders, dividers */ --sand-400: #CFC0A6; /* strong border / disabled */ /* Warm grays — chrome / footer / neutral UI. */ --gray-100: #ECEAE5; --gray-300: #C9C4BB; --gray-500: #84807A; /* footer bar tone */ --gray-700: #5A554E; /* Sunset accents — drawn from the brand imagery. Use sparingly: imagery, glows, highlights — NOT large fills. */ --sun-yellow: #F4CE74; --sun-peach: #F0B377; --sun-coral: #E08A4E; --sun-glow: #FFE48C; /* Sea — muted Mediterranean teal-blue (secondary, rare accent). */ --sea-500: #7FA7AE; --sea-700: #527B83; /* Status (kept warm/muted to fit the palette). */ --ok: #6E8C5A; --warn: #C9923B; --error: #B0524A; /* Pure helpers */ --white: #FFFFFF; --black: #16110A; /* ============================================================ SEMANTIC COLOR ============================================================ */ --bg: var(--sand-50); --bg-alt: var(--sand-200); --surface: var(--white); --surface-sunk: var(--sand-100); --border: var(--sand-300); --border-strong: var(--sand-400); --fg: var(--ink-700); /* default text */ --fg-strong: var(--ink-900); /* headings */ --fg-muted: var(--ink-400); /* captions */ --fg-on-gold: #FFFDF8; /* text on gold */ --fg-on-dark: #F4ECDC; /* text on ink */ --accent: var(--gold-600); --accent-hover: var(--gold-500); --accent-press: var(--gold-700); --link: var(--gold-700); /* ============================================================ TYPE — FAMILIES ============================================================ */ --font-display: 'Cormorant Garamond', 'Hoefler Text', Georgia, serif; --font-sans: 'Montserrat', 'Helvetica Neue', Arial, sans-serif; --font-script: 'Parisienne', 'Snell Roundhand', cursive; /* TYPE — SIZE SCALE (1.250 major-third-ish, tuned for editorial) */ --text-xs: 12px; --text-sm: 14px; --text-base: 16px; --text-md: 18px; --text-lg: 22px; --text-xl: 28px; --text-2xl: 36px; --text-3xl: 48px; --text-4xl: 64px; --text-5xl: 84px; /* Line heights */ --lh-tight: 1.08; --lh-snug: 1.25; --lh-normal: 1.5; --lh-relaxed: 1.7; /* Letter spacing — the brand leans on generous tracking for sans caps */ --track-tight: -0.01em; --track-normal: 0; --track-wide: 0.08em; --track-wider: 0.18em; /* eyebrow / nav caps — signature look */ --track-widest: 0.28em; /* hero subtitle caps */ /* Weights */ --w-light: 300; --w-regular: 400; --w-medium: 500; --w-semibold: 600; --w-bold: 700; /* ============================================================ SPACING (8px base) ============================================================ */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; --space-10: 128px; /* ============================================================ RADII — soft, never pill (brand reads classic, not techy) ============================================================ */ --radius-sm: 3px; --radius-md: 6px; --radius-lg: 10px; --radius-xl: 16px; --radius-pill: 999px; /* reserved for chips/tags only */ /* ============================================================ SHADOWS — warm-tinted, soft, low. Elegant not floaty. ============================================================ */ --shadow-xs: 0 1px 2px rgba(60, 44, 18, 0.06); --shadow-sm: 0 2px 8px rgba(60, 44, 18, 0.08); --shadow-md: 0 8px 24px rgba(60, 44, 18, 0.10); --shadow-lg: 0 18px 48px rgba(50, 36, 14, 0.14); --shadow-gold: 0 6px 20px rgba(166, 132, 59, 0.28); /* ============================================================ MOTION ============================================================ */ --ease: cubic-bezier(0.22, 0.61, 0.36, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --dur-fast: 140ms; --dur: 240ms; --dur-slow: 420ms; } /* ============================================================ SEMANTIC TYPE CLASSES ============================================================ */ .cf-wordmark { font-family: var(--font-display); font-weight: var(--w-medium); letter-spacing: var(--track-wide); color: var(--gold-600); text-transform: uppercase; } .cf-eyebrow { font-family: var(--font-sans); font-weight: var(--w-semibold); font-size: var(--text-xs); letter-spacing: var(--track-wider); text-transform: uppercase; color: var(--gold-700); } .cf-script { font-family: var(--font-script); font-weight: var(--w-regular); color: var(--gold-600); font-size: var(--text-2xl); line-height: 1.2; } h1, .cf-h1 { font-family: var(--font-display); font-weight: var(--w-semibold); font-size: var(--text-4xl); line-height: var(--lh-tight); letter-spacing: var(--track-tight); color: var(--fg-strong); } h2, .cf-h2 { font-family: var(--font-display); font-weight: var(--w-semibold); font-size: var(--text-3xl); line-height: var(--lh-tight); color: var(--fg-strong); } h3, .cf-h3 { font-family: var(--font-display); font-weight: var(--w-semibold); font-size: var(--text-xl); line-height: var(--lh-snug); color: var(--fg-strong); } h4, .cf-h4 { font-family: var(--font-sans); font-weight: var(--w-semibold); font-size: var(--text-md); letter-spacing: var(--track-wide); text-transform: uppercase; color: var(--ink-700); } p, .cf-body { font-family: var(--font-sans); font-weight: var(--w-regular); font-size: var(--text-base); line-height: var(--lh-relaxed); color: var(--fg); } .cf-lead { font-family: var(--font-sans); font-weight: var(--w-light); font-size: var(--text-lg); line-height: var(--lh-normal); color: var(--ink-500); } small, .cf-small { font-family: var(--font-sans); font-size: var(--text-sm); color: var(--fg-muted); } .cf-label { font-family: var(--font-sans); font-weight: var(--w-medium); font-size: var(--text-sm); letter-spacing: var(--track-wide); text-transform: uppercase; color: var(--ink-500); }