:root { --font-primary: 'Inter', system-ui, sans-serif; --font-display: 'Playfair Display', serif; /* Imperial Silk – Light Theme */ --color-porcelain: #fefefe; --color-sandstone: #f7f5f2; --color-champagne: #dbbfa3; --color-ink: #111010; --color-grey-soft: #4a4a4a; /* Obsidian Luxe – Dark Theme */ --color-graphite: #0e0e0e; --color-black-pearl: #161616; --color-charcoal: #1f1f1f; --color-rose-gold: #b48c67; --color-alabaster: #e5e5e5; } [data-theme="dark"] { --color-porcelain: var(--color-graphite); --color-sandstone: var(--color-black-pearl); --color-champagne: var(--color-rose-gold); --color-ink: var(--color-alabaster); --color-grey-soft: var(--color-alabaster); } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: var(--font-primary); color: var(--color-ink); background-color: var(--color-porcelain); line-height: 1.75rem; transition: background-color .35s ease, color .35s ease; } .text-porcelain { color: var(--color-porcelain); } .text-sandstone { color: var(--color-sandstone); } .text-champagne { color: var(--color-champagne); } .text-ink { color: var(--color-ink); } .text-grey-soft { color: var(--color-grey-soft); } .bg-porcelain { background-color: var(--color-porcelain); } .bg-sandstone { background-color: var(--color-sandstone); } .border-champagne { border-color: var(--color-champagne); } .font-display { font-family: var(--font-display); } .fade-in { animation: fade .45s ease-in-out; } @keyframes fade { 0% { opacity: 0; transform: translateY(10px); } 100% { opacity: 1; transform: translateY(0); } } .pulse-glow { animation: pulseGlow 1.8s infinite; } @keyframes pulseGlow { 0%, 100% { box-shadow: 0 0 0 0 rgba(180, 140, 103, 0); } 50% { box-shadow: 0 0 0 4px rgba(180, 140, 103, 0.23); } }