/* ============================================================
   dark-zones.css — scoped contrast for dark-bg zones
   
   Strategy: each dark zone declares its OWN local CSS variables
   so text colors are relative to the zone, not global overrides.
   No !important except where browser default specificity forces it.
   ============================================================ */

/* Local tokens for dark zones — defined ONLY where applied */
.shipping-hero,
.consign-hero,
.refund-hero,
.privacy-hero,
.terms-hero,
.contact-hero,
.dag-contact-hero,
.thankyou-hero,
.inventory-hero,
.about-hero,
header.inventory-hero,
section.shipping-hero,
section.consign-hero,
section.refund-hero,
section.privacy-hero,
section.terms-hero,
section.contact-hero {
    --zone-bg: var(--color-ink);
    --zone-text: var(--color-paper);
    --zone-text-muted: rgba(255, 255, 255, 0.78);
    --zone-text-faint: rgba(255, 255, 255, 0.6);
    --zone-border: rgba(255, 255, 255, 0.18);
    --zone-accent: var(--color-primary);
    --zone-pill-bg: rgba(255, 255, 255, 0.12);
    --zone-pill-border: rgba(255, 255, 255, 0.25);
    
    color: var(--zone-text);
}

/* Use ONLY direct child selectors — no global cascade pollution */
.shipping-hero > *,
.consign-hero > *,
.refund-hero > *,
.privacy-hero > *,
.terms-hero > *,
.contact-hero > *,
.dag-contact-hero > *,
.thankyou-hero > *,
.inventory-hero > *,
.about-hero > *,
.shipping-hero > * > *,
.consign-hero > * > *,
.refund-hero > * > *,
.privacy-hero > * > *,
.terms-hero > * > *,
.contact-hero > * > *,
.dag-contact-hero > * > *,
.thankyou-hero > * > *,
.inventory-hero > * > *,
.about-hero > * > * {
    color: inherit;
}

/* Headings inside hero zones — inherit white */
.shipping-hero h1,
.shipping-hero h2,
.shipping-hero h3,
.consign-hero h1,
.consign-hero h2,
.consign-hero h3,
.refund-hero h1,
.refund-hero h2,
.refund-hero h3,
.privacy-hero h1,
.privacy-hero h2,
.privacy-hero h3,
.terms-hero h1,
.terms-hero h2,
.terms-hero h3,
.contact-hero h1,
.contact-hero h2,
.contact-hero h3,
.dag-contact-hero h1,
.dag-contact-hero h2,
.dag-contact-hero h3,
.thankyou-hero h1,
.thankyou-hero h2,
.thankyou-hero h3,
.inventory-hero h1,
.inventory-hero h2,
.inventory-hero h3,
.about-hero h1,
.about-hero h2,
.about-hero h3,
.inventory-title {
    color: var(--zone-text, var(--color-paper));
}

/* Description / lead text — softened */
.shipping-hero p,
.consign-hero p,
.refund-hero p,
.privacy-hero p,
.terms-hero p,
.contact-hero p,
.dag-contact-hero p,
.thankyou-hero p,
.inventory-hero p,
.about-hero p,
.inventory-lead,
.shipping-hero__lead,
.consign-hero__lead,
.refund-hero__lead,
.privacy-hero__lead,
.terms-hero__lead,
.contact-hero__subtitle,
.inventory-hero__lead {
    color: var(--zone-text-muted, rgba(255, 255, 255, 0.78));
}

/* Kickers / eyebrows — primary red on dark */
.shipping-hero__kicker,
.consign-hero__kicker,
.refund-hero__kicker,
.privacy-hero__kicker,
.terms-hero__kicker,
.contact-hero__kicker,
.thankyou-hero__kicker,
.inventory-hero__kicker,
.about-hero__kicker,
.shipping-hero .kicker,
.consign-hero .kicker,
.refund-hero .kicker,
.privacy-hero .kicker,
.terms-hero .kicker,
.contact-hero .kicker {
    color: var(--zone-accent, var(--color-primary));
}

/* Pills / chips — inside hero zones */
.shipping-hero__chips a,
.shipping-hero__chips span,
.privacy-hero__chips a,
.privacy-hero__chips span,
.refund-hero__chips a,
.refund-hero__chips span,
.terms-hero__chips a,
.terms-hero__chips span,
.consign-hero__chips a,
.consign-hero__chips span,
.contact-hero__chips a,
.contact-hero__chips span {
    background: var(--zone-pill-bg, rgba(255, 255, 255, 0.12));
    color: var(--zone-text, var(--color-paper));
    border: 1px solid var(--zone-pill-border, rgba(255, 255, 255, 0.25));
    padding: 4px 12px;
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: var(--ls-wider);
}

/* Meta info (Last updated dates) */
.shipping-hero__meta,
.privacy-hero__meta,
.refund-hero__meta,
.terms-hero__meta,
.shipping-hero__last-updated,
.refund-hero__last-updated,
.privacy-hero__last-updated,
.terms-hero__last-updated {
    color: var(--zone-text-faint, rgba(255, 255, 255, 0.6));
}

.shipping-hero__last-updated a,
.refund-hero__last-updated a,
.privacy-hero__last-updated a,
.terms-hero__last-updated a {
    color: var(--zone-text-muted, rgba(255, 255, 255, 0.78));
    text-decoration: underline;
}

/* === BUTTONS inside dark zones — guarantee primary stays red+white === */
/* Primary buttons need explicit color because hero `color: white` would inherit
   into them, but they have their own bg via .dag-btn--primary base rules */
.shipping-hero .dag-btn--primary,
.consign-hero .dag-btn--primary,
.refund-hero .dag-btn--primary,
.privacy-hero .dag-btn--primary,
.terms-hero .dag-btn--primary,
.contact-hero .dag-btn--primary,
.thankyou-hero .dag-btn--primary,
.inventory-hero .dag-btn--primary,
.about-hero .dag-btn--primary {
    background: var(--color-primary);
    color: var(--color-paper);
    border-color: var(--color-primary);
}

/* Ghost buttons in dark zones — white outline, white text */
.shipping-hero .dag-btn--ghost,
.consign-hero .dag-btn--ghost,
.refund-hero .dag-btn--ghost,
.privacy-hero .dag-btn--ghost,
.terms-hero .dag-btn--ghost,
.contact-hero .dag-btn--ghost,
.thankyou-hero .dag-btn--ghost,
.inventory-hero .dag-btn--ghost,
.about-hero .dag-btn--ghost {
    background: transparent;
    color: var(--color-paper);
    border-color: rgba(255, 255, 255, 0.4);
}

.shipping-hero .dag-btn--ghost:hover,
.consign-hero .dag-btn--ghost:hover,
.refund-hero .dag-btn--ghost:hover,
.privacy-hero .dag-btn--ghost:hover,
.terms-hero .dag-btn--ghost:hover,
.contact-hero .dag-btn--ghost:hover,
.thankyou-hero .dag-btn--ghost:hover,
.inventory-hero .dag-btn--ghost:hover,
.about-hero .dag-btn--ghost:hover {
    background: var(--color-paper);
    color: var(--color-ink);
    border-color: var(--color-paper);
}

/* === FOOTER zone === */
.site-footer {
    --zone-bg: var(--footer-bg, #0a0f1a);
    --zone-text: var(--footer-text, #ffffff);
    --zone-text-muted: var(--footer-muted, rgba(255, 255, 255, 0.78));
    --zone-text-faint: var(--footer-faint, rgba(255, 255, 255, 0.7));
    --zone-border: var(--footer-border, rgba(255, 255, 255, 0.08));
}