/* ── Brand Token Overrides ─────────────────────────── */
/* Estimated from design file. Confirm exact hex values before final build. */
:root {
    --color-primary:        #1B2340; /* deep navy — headings, nav, footer */
    --color-primary-dark:   #10152A; /* darker navy — footer, hover */
    --color-primary-light:  #EDE6D8; /* warm cream tint — section backgrounds */
    --color-accent:         #E85D8A; /* rose — CTAs, highlights, script text */
    --color-accent-dark:    #C93F6C; /* darker rose — hover on accent elements */
    --color-cream:          #FAF3E6; /* page background */
    --color-body:           #5B5347; /* warm slate — body text */
    --font-body:            'Lato', -apple-system, sans-serif;   /* matches reference site body font */
    --font-script:          'Dancing Script', cursive;            /* matches reference site H1 + wordmark font */
}

body {
    background-color: var(--color-cream);
    font-family: var(--font-body);
}

.site-footer__name,
.wp-block-heading[data-script="true"] {
    font-family: var(--font-script);
}

/* ── Buttons ───────────────────────────────────────── */
.btn--primary,
.wp-block-button__link {
    background-color: var(--color-primary);
    color: #ffffff;
}

.btn--primary:hover,
.wp-block-button__link:hover {
    background-color: var(--color-primary-dark);
}

.btn--accent {
    background-color: var(--color-accent);
    color: #ffffff;
}

.btn--accent:hover {
    background-color: var(--color-accent-dark);
}

/* ── Header ────────────────────────────────────────── */
.site-header {
    background-color: var(--color-cream);
}

/* ── Footer ────────────────────────────────────────── */
.site-footer {
    background-color: var(--color-primary-dark);
}

/* ── Page Headers ──────────────────────────────────── */
.page-header {
    background-color: var(--color-primary);
}

/* Every inner page on this site opens with its own custom header block
   (hero on Home, cream photo-tone header on Daily Stories, etc.), so the
   parent theme's generic auto-title in page.php would just duplicate it.
   Hide it site-wide instead of overriding page.php. */
.page-content__header {
    display: none;
}

/* ── Accent Elements ───────────────────────────────── */
.eyebrow,
.section-eyebrow {
    color: var(--color-accent);
}

.cta-block {
    background-color: var(--color-accent);
}

.cta-block:hover {
    background-color: var(--color-accent-dark);
}