/* ========================================================================== DOREEN HUSK · DESIGN TOKENS The single source of truth for the visual language. Never hardcode a colour, size or shadow anywhere else — add a token here. ========================================================================== */ :root { /* ---------- BRAND COLOUR ------------------------------------------------ RE/MAX brand red and blue, used as accents against a warm neutral base. Red is reserved for action + emphasis. It never becomes a background for long-form text. Navy carries the weight of the design. */ --c-red: #DC1C2E; /* RE/MAX Red — primary action, accents */ --c-red-dark: #B01423; /* hover / pressed */ --c-red-soft: #FBE9EB; /* tinted backgrounds, badges */ --c-blue: #003DA5; /* RE/MAX Blue — secondary accent */ --c-blue-soft: #E8EEF8; --c-navy: #0E1B2E; /* deep sections, footer, headings */ --c-navy-2: #17293F; /* raised surface on navy */ /* ---------- NEUTRALS ---------------------------------------------------- Warm greys. Cool greys read cold and corporate; warm greys read like a home. Every neutral has a hint of the same warm hue. */ --c-ink: #121820; /* body text */ --c-ink-2: #3D4854; /* secondary text */ --c-ink-3: #6B7683; /* muted / captions / labels */ --c-line: #E3E0DA; /* hairline borders */ --c-line-2: #F0EEE9; /* subtle dividers */ --c-surface: #FFFFFF; /* cards */ --c-bg: #FAF8F5; /* page background — warm paper */ --c-bg-2: #F3EFE9; /* alternating band */ /* ---------- SEMANTIC ---------------------------------------------------- */ --c-success: #1F7A4C; --c-success-soft: #E6F3EC; --c-warning: #A8631A; --c-warning-soft: #FBF1E3; --c-error: #C0182B; --c-error-soft: #FBE9EB; --c-focus: #0069D9; /* focus ring — deliberately not brand red so it is never mistaken for an error */ /* ---------- TYPOGRAPHY -------------------------------------------------- Two families only. Fraunces — display serif. Warmth, heritage, 30 years of trust. Inter — UI + body. Neutral, screen-optimised, highly legible. */ --font-display: "Fraunces", "Iowan Old Style", Georgia, serif; --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; /* Fluid type scale — clamp(min, preferred, max). Ratio ~1.25 mobile, ~1.333 desktop, so headlines gain presence on large screens. */ --t-display: clamp(2.75rem, 1.6rem + 5.2vw, 5.25rem); /* hero only */ --t-h1: clamp(2.25rem, 1.5rem + 3.2vw, 3.75rem); --t-h2: clamp(1.75rem, 1.3rem + 2.0vw, 2.75rem); --t-h3: clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem); --t-h4: clamp(1.125rem, 1.05rem + 0.4vw, 1.3125rem); --t-lead: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem); /* intro para */ --t-body: 1.0625rem; --t-sm: 0.9375rem; --t-xs: 0.8125rem; --t-label: 0.75rem; /* eyebrows */ --lh-tight: 1.08; /* display */ --lh-snug: 1.2; /* headings */ --lh-body: 1.65; /* paragraphs */ --lh-loose: 1.75; /* long-form article body */ --fw-regular: 400; --fw-medium: 500; --fw-semi: 600; --fw-bold: 700; --ls-display: -0.025em; /* large text needs negative tracking */ --ls-heading: -0.015em; --ls-body: 0; --ls-label: 0.14em; /* eyebrows are spaced + uppercase */ /* ---------- SPACING ----------------------------------------------------- 4px base. Named by t-shirt size so intent survives a redesign. */ --s-1: 0.25rem; /* 4 */ --s-2: 0.5rem; /* 8 */ --s-3: 0.75rem; /* 12 */ --s-4: 1rem; /* 16 */ --s-5: 1.5rem; /* 24 */ --s-6: 2rem; /* 32 */ --s-7: 2.5rem; /* 40 */ --s-8: 3rem; /* 48 */ --s-9: 4rem; /* 64 */ --s-10: 5rem; /* 80 */ --s-11: 6rem; /* 96 */ --s-12: 8rem; /* 128 */ /* Vertical rhythm between page sections — fluid so mobile isn't airy */ --section-y: clamp(3.5rem, 2rem + 7vw, 7.5rem); /* ---------- LAYOUT ------------------------------------------------------ */ --w-page: 1240px; /* standard container */ --w-wide: 1440px; /* full-bleed-ish galleries */ --w-prose: 68ch; /* readable measure for long-form text */ --gutter: clamp(1.25rem, 0.5rem + 3vw, 2.5rem); /* ---------- BORDERS ----------------------------------------------------- */ --r-sm: 6px; --r-md: 10px; --r-lg: 16px; --r-xl: 24px; --r-full: 999px; --bw: 1px; /* ---------- ELEVATION --------------------------------------------------- Layered shadows — a tight contact shadow plus a soft ambient one. Tinted with the navy hue so shadows never look muddy grey. */ --e-1: 0 1px 2px rgba(14, 27, 46, 0.06), 0 1px 3px rgba(14, 27, 46, 0.05); --e-2: 0 2px 4px rgba(14, 27, 46, 0.05), 0 6px 16px rgba(14, 27, 46, 0.07); --e-3: 0 4px 8px rgba(14, 27, 46, 0.05), 0 14px 32px rgba(14, 27, 46, 0.10); --e-4: 0 8px 16px rgba(14, 27, 46, 0.06), 0 28px 60px rgba(14, 27, 46, 0.14); --e-focus: 0 0 0 3px rgba(0, 105, 217, 0.35); /* ---------- MOTION ------------------------------------------------------ */ --d-fast: 140ms; --d-base: 220ms; --d-slow: 420ms; --d-reveal: 700ms; --ease: cubic-bezier(0.4, 0, 0.2, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* decelerate, feels premium */ --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* ---------- Z-INDEX ----------------------------------------------------- */ --z-base: 1; --z-sticky: 100; --z-header: 200; --z-drawer: 300; --z-modal: 400; --z-toast: 500; } /* Respect users who ask for less motion. Non-negotiable. */ @media (prefers-reduced-motion: reduce) { :root { --d-fast: 1ms; --d-base: 1ms; --d-slow: 1ms; --d-reveal: 1ms; } *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; } }