/** * Design Tokens * Mode-independent tokens live on :root. * Mode-dependent tokens live on [data-theme="light"] / [data-theme="dark"]. * data-theme is set on before paint by inc/dark-mode.php's inline bootstrap * script, so there is no flash of the wrong theme. */ :root { /* Brand accent — constant across both modes */ --color-accent: #b5122e; --color-accent-dark: #8f0e24; --color-accent-light: #d94a5f; --color-accent-tint: rgba(181, 18, 46, 0.1); --color-focus: #4d90fe; /* Type scale */ --font-display: 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif; --font-script: 'Playfair Display', Georgia, serif; --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; --fs-h1: clamp(2.25rem, 4vw + 1rem, 3.75rem); --fs-h2: clamp(1.75rem, 2.2vw + 1rem, 2.5rem); --fs-h3: clamp(1.25rem, 1vw + 1rem, 1.5rem); --fs-body: 1rem; --fs-small: 0.875rem; --fs-eyebrow: 0.8125rem; --lh-tight: 1.15; --lh-heading: 1.25; --lh-body: 1.65; --tracking-eyebrow: 0.12em; /* Spacing */ --space-xs: 0.5rem; --space-sm: 1rem; --space-md: 1.5rem; --space-lg: 2.5rem; --space-xl: 4rem; --space-2xl: 6rem; /* Layout */ --container-width: 1280px; --container-padding: clamp(1.25rem, 4vw, 2.5rem); --radius-sm: 4px; --radius-md: 8px; --radius-pill: 999px; /* Motion */ --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); --duration-fast: 150ms; --duration-base: 250ms; --duration-slow: 450ms; --shadow-card: 0 4px 20px rgba(0, 0, 0, 0.08); --shadow-card-hover: 0 10px 30px rgba(0, 0, 0, 0.14); } /* -------------------- Light mode (default) -------------------- */ :root[data-theme='light'] { --surface-page: #ffffff; --surface-alt: #f7f5f3; --surface-card: #ffffff; --surface-inverse: #14100f; /* hero / why-choose / footer stay dark in both modes */ --surface-inverse-alt: #1d1817; --text-primary: #1a1414; --text-secondary: #5b5250; --text-muted: #8a807d; --text-inverse: #f5f1ef; --text-inverse-secondary: #c7bdb9; --border-subtle: #e8e2df; --border-strong: #d3cac6; --overlay-hero: linear-gradient(90deg, rgba(10, 8, 8, 0.88) 0%, rgba(10, 8, 8, 0.35) 65%, rgba(10, 8, 8, 0.05) 100%); } /* -------------------- Dark mode -------------------- */ :root[data-theme='dark'] { --surface-page: #121010; --surface-alt: #1a1717; --surface-card: #1e1a1a; --surface-inverse: #0a0808; --surface-inverse-alt: #141010; --text-primary: #f2eeec; --text-secondary: #c7bdb9; --text-muted: #948a87; --text-inverse: #f5f1ef; --text-inverse-secondary: #c7bdb9; --border-subtle: rgba(255, 255, 255, 0.1); --border-strong: rgba(255, 255, 255, 0.18); --shadow-card: 0 4px 20px rgba(0, 0, 0, 0.4); --shadow-card-hover: 0 10px 30px rgba(0, 0, 0, 0.55); --overlay-hero: linear-gradient(90deg, rgba(0, 0, 0, 0.92) 0%, rgba(0, 0, 0, 0.5) 65%, rgba(0, 0, 0, 0.1) 100%); } @media (prefers-reduced-motion: reduce) { :root { --duration-fast: 0ms; --duration-base: 0ms; --duration-slow: 0ms; } }