/* style.css — layout fine-tuning only.
 * Do not redefine :root variables. Use theme.css variables. */

body {
    background-color: var(--color-slate-dark);
    color: var(--color-flour-white);
}

.hero h1 {
    text-shadow: 2px 2px 4px var(--color-gold-light);
}

.card {
    background: var(--color-slate-dark);
    border: 1px solid var(--color-surface);
}

.card h3, .card p, .card .price {
    color: var(--color-flour-white);
}

.section.alt {
    background: var(--color-primary);
}

.site-header {
    background: var(--color-slate-dark);
    border-bottom: 1px solid var(--color-surface);
}

.site-header .brand, .site-header nav a {
    color: var(--color-flour-white);
}

.site-footer {
    background: var(--color-slate-dark);
    color: var(--color-surface);
}