/*
 * Warm visual direction
 * Loaded after the structural and WooCommerce styles so the palette and
 * typography can be adjusted here without touching component layout.
 */
:root {
    --cream: #e7cdb2;
    --paper: #f2e3d1;
    --sand: #d7b28e;
    --ink: #2d160b;
    --muted: #705544;
    --green: #7a391b;
    --green-dark: #4b2412;
    --blue: #8d654c;
    --copper: #b96432;
    --line: #c9a789;
    --font-body: "Nunito Sans", sans-serif;
    --font-display: "Bricolage Grotesque", sans-serif
}

body,
button,
input,
textarea,
select {
    font-family: var(--font-body)
}

h1,
h2,
h3,
h4,
.brand,
.button,
.add-button,
.product-info h3,
.timeline-card h3,
.trust-intro h2,
.trust-grid h3,
.bundle-card h3,
.woocommerce div.product .product_title,
.woocommerce div.product p.price,
.woocommerce div.product span.price {
    font-family: var(--font-display)
}

h1,
h2,
h3,
.hero h1,
.section-heading h2,
.story h2,
.newsletter h2,
.trust-intro h2,
.bundle-card h3,
.woocommerce div.product .product_title {
    font-weight: 700;
    letter-spacing: -.045em
}

.eyebrow {
    color: var(--green);
    font-weight: 800;
    letter-spacing: .14em
}

.announcement {
    background: #2a140b;
    color: #f8eadb
}

.announcement span {
    background: #d9915e
}

.site-header {
    background: #f5e8d8
}

.brand {
    color: var(--ink)
}

.button-primary,
.button-dark,
.woocommerce #respond input#submit.alt,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce a.button,
.woocommerce button.button {
    background: var(--green)
}

.button-primary:hover,
.woocommerce #respond input#submit.alt:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover {
    background: var(--green-dark)
}

/* Homepage tonal rhythm */
.hero-content {
    background: linear-gradient(120deg, #ead4ba 0%, #f2e2cf 62%, #e5c3a2 100%)
}

.home-page .benefits {
    background: #cda580;
    border-color: #b88966
}

.home-page .benefits p,
.home-page .cycle .centered>p:last-child,
.home-page .newsletter>p:not(.eyebrow):not(.form-message) {
    color: #593c2b
}

.home-page .finder:before,
.home-page .home-faq:before {
    background: #dfc2a4
}

.home-page .finder-panel {
    background: #efdbc5
}

.finder-aside,
.story,
.bundle-card,
.timeline-finish .timeline-card {
    background: #351b10
}

.home-page .cycle,
.home-page .newsletter {
    background: #c99c76
}

.home-page .timeline-marker {
    border-color: #c99c76
}

.home-page .maintenance-timeline:before {
    background: linear-gradient(180deg, #8a4b2a, #6c3218 46%, #c06c39 78%, #8a4b2a)
}

.timeline-card,
.timeline-action .timeline-card {
    background: #f0dbc4;
    border-color: rgba(74, 35, 16, .13);
    box-shadow: 0 16px 36px rgba(66, 30, 13, .09)
}

.timeline-tags span,
.trust-grid article {
    background: #dfbd9b
}

.home-page .newsletter-form input,
.button-light,
.bundle-card .add-button {
    background: #f7eadb
}

.product-image.green {
    background: #d5b493
}

.product-image.copper {
    background: #cf916c
}

.product-label,
.visual-badge {
    background: rgba(250, 238, 223, .94)
}

.story-copy .eyebrow,
.bundle-card .eyebrow,
.timeline-finish .timeline-label {
    color: #e9b486
}

/* Product and WooCommerce surfaces */
.cafura-woocommerce,
.single-product main,
.woocommerce-page main {
    color: var(--ink)
}

.woocommerce div.product div.images img,
.woocommerce ul.products li.product a img {
    background: #d8b693
}

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
    background: #ead1b7;
    color: var(--ink)
}

@media(max-width:600px) {
    .site-header {
        background: #f5e8d8
    }
}