/* Weiterwandern: text colors for individual content areas.
   Edit these central values to customize all matching areas.
   Backgrounds, layout, navigation and button fills are not changed. */
:root {
    --ww-text-dark: #26372b;
    --ww-title-dark: #14271c;
    --ww-text-cream: #fff8e7;
    --ww-text-link-dark: #23462d;
    --ww-photo-text-shadow: 0 2px 6px rgba(0, 0, 0, .8);
}

.ww-site [data-ww-text-style="light"] {
    --ww-area-text: var(--ww-text-dark);
    --ww-area-title: var(--ww-title-dark);
    --ww-area-link: var(--ww-text-link-dark);
    --ww-area-shadow: none;
}
.ww-site [data-ww-text-style="dark"],
.ww-site [data-ww-text-style="photo"] {
    --ww-area-text: var(--ww-text-cream);
    --ww-area-title: var(--ww-text-cream);
    --ww-area-link: var(--ww-text-cream);
    --ww-area-shadow: none;
}
.ww-site [data-ww-text-style="photo"] {
    --ww-area-shadow: var(--ww-photo-text-shadow);
}

/* Cards are independent light surfaces in the current design. */
.ww-site :where([data-ww-text-style="light"], [data-ww-text-style="dark"], [data-ww-text-style="photo"]) :where(.card, .ww-card) {
    --ww-area-text: var(--ww-text-dark);
    --ww-area-title: var(--ww-title-dark);
    --ww-area-link: var(--ww-text-link-dark);
    --ww-area-shadow: none;
}

/* Low specificity intentionally lets heading-color.css's explicit choice win.
   Important is needed to override hard-coded colors in the original site theme. */
.ww-site :where([data-ww-text-style="light"], [data-ww-text-style="dark"], [data-ww-text-style="photo"]) {
    color: var(--ww-area-text);
}
.ww-site :where([data-ww-text-style="light"], [data-ww-text-style="dark"], [data-ww-text-style="photo"]) :where(p, li, dt, dd, blockquote, figcaption, th, td, .ww-prose) {
    color: var(--ww-area-text) !important;
    text-shadow: var(--ww-area-shadow) !important;
}
.ww-site :where([data-ww-text-style="light"], [data-ww-text-style="dark"], [data-ww-text-style="photo"]) :where(h1, h2, h3, h4, h5, h6, .ww-eyebrow, .ww-card-category) {
    color: var(--ww-area-title) !important;
    text-shadow: var(--ww-area-shadow) !important;
}
.ww-site :where([data-ww-text-style="light"], [data-ww-text-style="dark"], [data-ww-text-style="photo"]) :where(p, li, blockquote, .element-header, .element-subheader) :where(a:not(.btn, .ww-button)) {
    color: var(--ww-area-link);
    text-decoration: underline;
    text-underline-offset: .15em;
}
.ww-site :where([data-ww-text-style="light"], [data-ww-text-style="dark"], [data-ww-text-style="photo"]) :where(a.btn, a.ww-button, button) {
    text-shadow: none;
}