/* ════════════════════════════════════════════════════════════════ THEMES.CSS — the entire design-token system. Two presets share one codebase: [data-theme="muse"] (feminine) and [data-theme="maison"] (masculine) on . styles.css consumes tokens ONLY — no hardcoded colors outside this file. ════════════════════════════════════════════════════════════════ */ :root { /* THE diagonal identity — change once, re-angles the whole site */ --tilt: 13deg; /* divider cut depth (same visual direction as --tilt, page-scaled) */ --cut: 4vw; /* type cast */ --f-display: 'Bodoni Moda', 'Playfair Display', Georgia, serif; --f-type: 'Special Elite', 'Courier New', monospace; --f-script: 'Pinyon Script', cursive; --f-body: 'EB Garamond', Georgia, serif; /* golden-ratio-informed spacing scale (φ ≈ 1.618) */ --sp-1: 0.5rem; --sp-2: 0.8rem; --sp-3: 1.3rem; --sp-4: 2.1rem; --sp-5: 3.4rem; --sp-6: 5.5rem; --sp-7: 8.9rem; --container: 1180px; } /* ─── MUSE — ivory · blush · warm taupe · chestnut · ink ────────── */ [data-theme="muse"] { --c-paper: #f5eee3; --c-paper-deep: #ede1cd; --c-card: #faf4ea; --c-ink: #221a13; --c-ink-soft: #63523f; --c-accent: #c2857a; /* blush */ --c-accent-2: #a68d76; /* warm taupe */ --c-accent-3: #7c4a2d; /* chestnut */ --c-rule: rgba(34, 26, 19, 0.30); --c-tape: rgba(255, 249, 236, 0.62); --c-seal: #96513f; /* AA on paper for seal text */ --c-script: #a5685b; /* signature blush, ≥3:1 large-text */ /* texture + personality */ --grain-opacity: 0.045; --grain-tint: rgba(124, 74, 45, 0.05); /* warm sepia */ --wash: radial-gradient(ellipse 60% 45% at 72% 22%, rgba(194, 133, 122, 0.20), transparent 70%); --masthead-bg: transparent; --masthead-ink: var(--c-ink); --accent-art: url('../assets/accent-muse.jpg'); /* watercolor blooms */ --accent-art-opacity: 0.35; --flute-opacity: 0.22; /* classical motifs kept faint */ --rule-style: solid; /* lighter single rules */ --rule-weight: 1px; --sig-weight: 400; --card-shadow: 0 1px 2px rgba(60, 40, 20, 0.18), 0 14px 34px rgba(60, 40, 20, 0.14); } /* ─── MAISON — stone ivory · charcoal · olive · antique gold · ink ─ */ [data-theme="maison"] { --c-paper: #eae5d8; --c-paper-deep: #ddd5c2; --c-card: #f2eee2; --c-ink: #1a1712; --c-ink-soft: #4c4739; --c-accent: #6f6b45; /* olive */ --c-accent-2: #a8863c; /* antique gold */ --c-accent-3: #33302a; /* charcoal */ --c-rule: rgba(26, 23, 18, 0.45); --c-tape: rgba(236, 231, 216, 0.55); --c-seal: #6e5620; --c-script: #6f6b45; --grain-opacity: 0.065; --grain-tint: rgba(38, 36, 31, 0.06); /* cool stone */ --wash: linear-gradient(calc(180deg - var(--tilt)), rgba(111, 107, 69, 0.10), transparent 55%); --masthead-bg: #24211b; /* charcoal masthead panel */ --masthead-ink: #eae5d8; --masthead-shadow: 0 2px 4px rgba(20, 18, 12, 0.18), 0 16px 38px rgba(20, 18, 12, 0.22); --accent-art: url('../assets/accent-maison.jpg'); /* classical column study */ --accent-art-opacity: 0.3; --flute-opacity: 0.5; /* leans harder into the architecture */ --rule-style: double; /* heavier engraved rules */ --rule-weight: 3px; --sig-weight: 400; --card-shadow: 0 1px 2px rgba(20, 18, 12, 0.22), 0 16px 36px rgba(20, 18, 12, 0.18); }