/* ========================================================================== Euro Pros Remodeling — Shared Design Tokens These custom properties are meant to be reused across every page of the site, so keep this file page-agnostic. ========================================================================== */ :root { /* ---- Color: brand ---- */ --color-navy-900: #0f1c33; --color-navy-800: #16233f; --color-navy-700: #1c2c4d; --color-navy-600: #2a3e66; /* Constant brand navy for surfaces that must always read as "brand navy" regardless of theme (buttons, dark section backgrounds). Unlike --color-navy-800 (used mostly for heading/icon text and flips to a light color in dark mode), this never changes. */ --color-brand: #16233f; /* ---- Color: neutrals ---- */ --color-white: #ffffff; --color-gold: #d4a126; --color-cream: #f4efe6; --color-bg-soft: #f7f6f3; --color-bg-muted: #eef0f2; --color-border: #e1ddd3; --color-border-dark: rgba(255, 255, 255, 0.16); /* Flippable "page surface" — sticky header, dropdowns, modals, cards. Kept separate from --color-white, which stays literal white forever (it's used for text/icons/buttons on permanently-dark sections like the hero and footer, which must not invert in dark mode). */ --color-surface: var(--color-white); /* ---- Color: text ---- */ --color-text: #22262e; --color-text-muted: #5b6270; --color-text-soft: #838a97; --color-text-on-dark: #ffffff; --color-text-on-dark-muted: rgba(255, 255, 255, 0.72); /* ---- Color: accents ---- */ --color-star: #f4b400; --color-check: #16233f; /* ---- Color: warm editorial surfaces ---- */ --color-warm-surface: #f3eee5; --color-warm-surface-deep: #e7ddcf; --color-warm-accent: #a46f4f; --color-warm-ink: #312c27; /* Faint decorative tint for the background grid pattern and glows used to add texture to otherwise-plain sections. */ --decor-tint: rgba(22, 35, 63, 0.05); --decor-tint-strong: rgba(22, 35, 63, 0.09); /* ---- Typography ---- */ --font-heading: "Playfair Display", "Georgia", serif; --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --fs-h1: clamp(2.6rem, 1.7rem + 4vw, 4.4rem); --fs-h2: clamp(2.1rem, 1.5rem + 2.4vw, 3.1rem); --fs-h3: clamp(1.35rem, 1.15rem + 0.9vw, 1.7rem); --fs-body: 1rem; --fs-small: 0.875rem; --fs-eyebrow: 0.8rem; --lh-heading: 1.15; --lh-body: 1.65; --ls-eyebrow: 0.14em; --ls-nav: 0.04em; /* ---- Layout ---- */ --container-width: 1200px; --container-padding: 24px; --space-3xs: 4px; --space-2xs: 8px; --space-xs: 12px; --space-sm: 16px; --space-md: 24px; --space-lg: 40px; --space-xl: 64px; --space-2xl: 96px; --space-3xl: 128px; /* ---- Shape ---- */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 16px; /* ---- Effects ---- */ --shadow-sm: 0 2px 8px rgba(15, 28, 51, 0.08); --shadow-md: 0 12px 32px rgba(15, 28, 51, 0.12); --transition-base: 200ms ease; /* ---- Layers ---- */ --z-header: 100; } /* ========================================================================== Dark theme — toggled via data-theme="dark" on (see header.js). Only the "page chrome" tokens are redefined here: brand-navy surfaces (buttons, .section--navy, stats-bar, etc.) and literal-white text/icons on permanently-dark sections are untouched by design. ========================================================================== */ :root[data-theme="dark"] { --color-navy-800: #eef1f7; --color-surface: #161b26; --color-bg-soft: #1b2130; --color-bg-muted: #20273a; --color-border: rgba(255, 255, 255, 0.14); --color-border-dark: rgba(255, 255, 255, 0.22); --color-text: #e7e9ee; --color-text-muted: #aab0bd; --color-text-soft: #8b93a3; --decor-tint: rgba(255, 255, 255, 0.045); --decor-tint-strong: rgba(255, 255, 255, 0.08); --color-warm-surface: #211e1b; --color-warm-surface-deep: #2c2722; --color-warm-accent: #c18a68; --color-warm-ink: #f1ece5; }