/* ========================================================================= The Lusso Interior & Events — design tokens Light editorial luxury. Warm-white surfaces, deep navy ink (#1B3351), single gold accent. Variable NAMES are kept from the old dark system so existing inline styles still resolve — only the VALUES are flipped to a light palette. Restyle the whole site from this one file. ========================================================================= */ :root { /* --- Core surfaces (light editorial) --- Named *ink* for backwards-compat; these are now the light surfaces. */ --ink: #FBFAF7; /* page background (warm white) */ --ink-2: #FFFFFF; /* raised / card surface */ --ink-3: #F5F1E9; /* soft cream card surface */ --charcoal: #EDE7DA; /* deeper cream panel */ /* --- Warm neutrals (soft sand tones for accent panels) --- */ --wood-deep: #EFE8DA; --wood: #E7DECB; --wood-mid: #D8CBB0; --wood-warm: #C9B78F; /* --- Gold accent (reads on white; use for line-work + highlights) --- */ --brass: #B08A44; /* primary gold */ --brass-soft: #C6A15B; /* lighter gold (hover / decoration) */ --brass-deep: #94742F; /* deep gold for text/links on light */ /* --- Light editorial surfaces --- */ --cream: #F5F1E9; --cream-2: #EDE7DA; --paper: #FFFFFF; /* --- Text --- *on-dark* names now describe text sitting on LIGHT surfaces → dark ink. */ --text-on-dark: #1B3351; /* headings, deep navy */ --text-on-dark-mute: #4D5F74; /* body copy, muted */ --text-on-dark-dim: #7F8D9F; /* captions / meta */ --text-on-light: #1B3351; /* (unchanged: dark text) */ --text-on-light-mute:#4D5F74; --line-on-dark: rgba(27,51,81,0.12); /* hairline on light */ --line-on-light: rgba(27,51,81,0.12); --line-strong: rgba(27,51,81,0.20); /* --- Type --- */ --font-display: "Bodoni Moda", "Didot", Georgia, serif; --font-body: "Jost", "Helvetica Neue", Arial, sans-serif; --fs-hero: clamp(2.75rem, 7vw, 6.2rem); --fs-h1: clamp(2.5rem, 5.8vw, 4.8rem); --fs-h2: clamp(2rem, 4.2vw, 3.4rem); --fs-h3: clamp(1.3rem, 2.2vw, 1.9rem); --fs-lead: clamp(1.08rem, 1.5vw, 1.4rem); --fs-body: 1.0625rem; --fs-small: 0.85rem; /* --- Spacing / layout --- */ --wrap: 1240px; --wrap-wide: 1480px; --gut: clamp(1.25rem, 4vw, 3rem); --sec-y: clamp(4.5rem, 10vw, 9.5rem); --radius: 14px; --radius-lg: 24px; --radius-xl: 32px; --shadow-soft: 0 18px 50px -28px rgba(16,32,52,0.28); --shadow-card: 0 40px 90px -50px rgba(16,32,52,0.40); --shadow-lift: 0 24px 60px -30px rgba(16,32,52,0.30); --ease: cubic-bezier(0.22, 1, 0.36, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --nav-h: 84px; } /* ========================================================================= DARK THEME Applied only when is set — never by a bare prefers-color-scheme rule. The inline script in partials/public_header.php sets that attribute before first paint (from the saved choice, falling back to the OS preference), so there is no flash of the wrong theme and the admin panel, which doesn't run that script, always stays light. Same trick as the light redesign: the variable NAMES are untouched, only the VALUES flip. Every existing `var(--ink-3)` inline style follows along. ========================================================================= */ :root[data-theme="dark"] { /* --- Core surfaces --- */ --ink: #0D1622; /* page background (deep navy) */ --ink-2: #121E2D; /* raised / card surface */ --ink-3: #17263A; /* soft card surface */ --charcoal: #1E3149; /* deeper panel */ /* --- Navy neutrals --- */ --wood-deep: #182740; --wood: #1F3450; --wood-mid: #2B4463; --wood-warm: #3A5878; /* --- Gold accent: lifted so it still reads against deep navy --- */ --brass: #C6A15B; --brass-soft: #DCC08A; --brass-deep: #D9B872; /* used for links + small text, needs the contrast */ /* --- Surfaces the light theme called cream/paper --- */ --cream: #121E2D; --cream-2: #17263A; --paper: #111C2A; /* --- Text (names say "on-dark", and now they genuinely are) --- */ --text-on-dark: #F2EDE2; --text-on-dark-mute: #B8AF9F; --text-on-dark-dim: #8A8172; --text-on-light: #F2EDE2; --text-on-light-mute:#B8AF9F; --line-on-dark: rgba(255,255,255,0.11); --line-on-light: rgba(255,255,255,0.11); --line-strong: rgba(255,255,255,0.22); /* Shadows do nothing on a dark page unless they're deeper than the surface. */ --shadow-soft: 0 18px 50px -28px rgba(4,10,18,0.85); --shadow-card: 0 40px 90px -50px rgba(4,10,18,0.95); --shadow-lift: 0 24px 60px -30px rgba(4,10,18,0.9); } /* The paper-grain overlay multiplies, which turns into a dark wash on a dark background — screen it back instead. */ :root[data-theme="dark"] .grain { mix-blend-mode: screen; opacity: 0.022; } /* Photographs are lit for a white page; take the edge off on a dark one. */ :root[data-theme="dark"] img:not([src*="wood.php"]) { filter: brightness(0.94) contrast(1.02); }