/* Theme hooks: parts of the page that used fixed colours now follow the theme's colour variables
   (set in data/theme.css, edited in /admin → Colors). Fallbacks reproduce the original look. */
header { background: color-mix(in srgb, var(--header-bg, #FBF7F0) 92%, transparent); }
h1, h2, h3 { color: var(--heading, inherit); }
.eyebrow, .card-tag { color: var(--label, var(--gold)); }
.btn-gold:hover { background: var(--accent-hover, #93713F); }
.btn-dark:hover { background: color-mix(in srgb, var(--ink) 82%, #ffffff); }
.hero { background: linear-gradient(180deg, var(--hero-1, transparent), var(--hero-2, transparent)); }
.cta-band { background: linear-gradient(135deg, var(--band-1, #3A2F21), var(--band-2, #26201A)); color: var(--band-text, var(--cream)); }
.cta-band h2 { color: var(--band-text, var(--cream)); }
.cta-band p { color: color-mix(in srgb, var(--band-text, #FBF7F0) 78%, transparent); }
.collection:nth-child(1) .bg { background: linear-gradient(155deg, var(--tile-1, #F3E4DA), var(--gold-pale)); }
.collection:nth-child(2) .bg { background: linear-gradient(155deg, var(--tile-2, var(--beige)), var(--gold-pale)); }
.collection:nth-child(3) .bg { background: linear-gradient(155deg, var(--tile-3, #EDE6DA), var(--beige-deep)); }
footer { background: var(--footer-bg, var(--ink)); color: var(--footer-text, #BFB3A0); }