/* ===================================================================== ALMEIDA FAMILY CONSTRUCTION — Design tokens --------------------------------------------------------------------- Palette is sampled from the logo: burnt orange #E2551F (outer brush ring) peach #F2B183 (inner sweep) cream #FDF6EF (paper behind the mark) charcoal #232320 (AF+ monogram / "CONSTRUCTION") sage #7FA05E (seedling + leaves) Light is the default. Dark is applied via [data-theme="dark"] on and also honours the OS setting when the user has not chosen. ===================================================================== */ /* ---------- Typography ----------------------------------------------- The brief asks for "Ageo". Ageo is a commercial font that cannot be self-hosted here without a license, so we use a geometric-humanist stack that matches its character: low contrast, generous x-height, rounded geometric caps. Drop Ageo .woff2 files into /assets/fonts/ and add an @font-face block to switch it on. --------------------------------------------------------------------- */ :root { --font-display: "Ageo", "Poppins", "Century Gothic", "Futura", ui-rounded, "Segoe UI", system-ui, -apple-system, sans-serif; --font-body: "Ageo", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* Fluid type scale — clamps keep it readable from 360px to 1600px */ --fs-xs: 0.8125rem; --fs-sm: 0.9125rem; --fs-base: 1rem; --fs-md: clamp(1.05rem, 0.98rem + 0.35vw, 1.2rem); --fs-lg: clamp(1.25rem, 1.1rem + 0.7vw, 1.6rem); --fs-xl: clamp(1.6rem, 1.35rem + 1.2vw, 2.3rem); --fs-2xl: clamp(2rem, 1.55rem + 2.1vw, 3.2rem); --fs-3xl: clamp(2.4rem, 1.7rem + 3.2vw, 4.4rem); --lh-tight: 1.12; --lh-snug: 1.32; --lh-body: 1.68; /* ---------- Spacing / layout ---------- */ --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.5rem; --sp-6: 2rem; --sp-7: 3rem; --sp-8: 4rem; --sp-9: 6rem; --sp-10: 8rem; --wrap: 1240px; --wrap-slim: 780px; --gutter: clamp(1.15rem, 4vw, 2.75rem); --radius-sm: 8px; --radius: 14px; --radius-lg: 22px; --radius-xl: 32px; --radius-pill: 999px; /* ---------- Brand hues (constant across themes) ---------- */ --brand-500: #E2551F; --brand-600: #C74514; --brand-700: #A5380F; --brand-400: #EE7A45; --brand-300: #F2B183; --brand-200: #F8D6BC; --brand-100: #FCEBDF; --sage-500: #7FA05E; --sage-600: #5C8046; --sage-100: #E8F0E0; --ink-900: #1A1A18; --ink-800: #232320; --ink-700: #33332E; /* ---------- Motion ---------- */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-soft: cubic-bezier(0.4, 0, 0.2, 1); --dur-fast: 180ms; --dur: 320ms; --dur-slow: 620ms; } /* ===================================================================== LIGHT THEME (default) ===================================================================== */ :root, :root[data-theme="light"] { color-scheme: light; --bg: #FFFDFB; --bg-alt: #FBF4EC; --bg-sunk: #F5EADF; --surface: #FFFFFF; --surface-2: #FDF7F1; --text: #232320; --text-soft: #5C5A54; --text-mute: #86837B; --text-invert: #FFFDFB; --line: #E9DED2; --line-strong: #D8C8B7; --accent: #C74514; /* AA-compliant on light backgrounds */ --accent-hover:#A5380F; --accent-soft: #FCEBDF; --accent-ring: rgba(199, 69, 20, 0.30); --hero-overlay: linear-gradient( 104deg, rgba(26, 26, 24, 0.90) 0%, rgba(26, 26, 24, 0.74) 44%, rgba(199, 69, 20, 0.44) 100%); --shadow-sm: 0 1px 2px rgba(35, 35, 32, 0.06), 0 2px 6px rgba(35, 35, 32, 0.05); --shadow: 0 4px 10px rgba(35, 35, 32, 0.07), 0 12px 28px rgba(35, 35, 32, 0.07); --shadow-lg: 0 10px 24px rgba(35, 35, 32, 0.09), 0 28px 60px rgba(35, 35, 32, 0.11); --shadow-brand: 0 10px 26px rgba(199, 69, 20, 0.26); } /* ===================================================================== DARK THEME — explicit choice ===================================================================== */ :root[data-theme="dark"] { color-scheme: dark; --bg: #14140F; --bg-alt: #1B1B16; --bg-sunk: #100F0C; --surface: #1F1F19; --surface-2: #26261F; --text: #F4EEE6; --text-soft: #C3BCB0; --text-mute: #8F8879; --text-invert: #14140F; --line: #33322A; --line-strong: #46443A; --accent: #F2762B; /* lifted for contrast on dark */ --accent-hover:#F79355; --accent-soft: #2E1D12; --accent-ring: rgba(242, 118, 43, 0.36); --hero-overlay: linear-gradient( 104deg, rgba(8, 8, 6, 0.93) 0%, rgba(12, 12, 9, 0.80) 44%, rgba(150, 52, 15, 0.50) 100%); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.44); --shadow: 0 4px 12px rgba(0, 0, 0, 0.50), 0 14px 32px rgba(0, 0, 0, 0.40); --shadow-lg: 0 12px 28px rgba(0, 0, 0, 0.56), 0 32px 64px rgba(0, 0, 0, 0.46); --shadow-brand: 0 10px 28px rgba(242, 118, 43, 0.26); } /* ===================================================================== DARK THEME — following the OS when the user has not chosen. Guarded so an explicit light choice always wins. ===================================================================== */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --bg: #14140F; --bg-alt: #1B1B16; --bg-sunk: #100F0C; --surface: #1F1F19; --surface-2: #26261F; --text: #F4EEE6; --text-soft: #C3BCB0; --text-mute: #8F8879; --text-invert: #14140F; --line: #33322A; --line-strong: #46443A; --accent: #F2762B; --accent-hover:#F79355; --accent-soft: #2E1D12; --accent-ring: rgba(242, 118, 43, 0.36); --hero-overlay: linear-gradient( 104deg, rgba(8, 8, 6, 0.93) 0%, rgba(12, 12, 9, 0.80) 44%, rgba(150, 52, 15, 0.50) 100%); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.44); --shadow: 0 4px 12px rgba(0, 0, 0, 0.50), 0 14px 32px rgba(0, 0, 0, 0.40); --shadow-lg: 0 12px 28px rgba(0, 0, 0, 0.56), 0 32px 64px rgba(0, 0, 0, 0.46); --shadow-brand: 0 10px 28px rgba(242, 118, 43, 0.26); } }