/* NOTE: DARK THEME (Black Friday) for the new page blocks. Loaded after css/new/base.css by
   inc/new/sections/head.php when the event theme ($promo_theme) is 'dark'. Main CTAs, bars, icons and
   borders go black / dark grey; text links and the focus ring stay red. The block overrides live next to
   this file, named after the default stylesheet they override. */

:root {
    --kmd-cta: #000000;
    --kmd-cta-hover: #2B2B2B;
    --kmd-bar: #2B2B2B;
    /* hover of the solid white / ghost button pair on dark sections */
    --kmd-pair-hover: #3D3D3D;
    /* lighter, desaturated red for price highlights */
    --kmd-accent-soft: #DD7D78;
}

/* NOTE: BUTTONS */

.kmd-btn--accent {
    border-color: var(--kmd-cta);
    background: var(--kmd-cta);
    color: var(--kmd-white);
}

.kmd-btn--accent:hover {
    border-color: var(--kmd-cta-hover);
    background: var(--kmd-cta-hover);
    color: var(--kmd-white);
}

/* on black backgrounds the main CTA is solid white and the white buttons become ghost buttons */
.kmd-section--dark .kmd-btn--accent,
.kmd-section--ink .kmd-btn--accent,
.kmd-cta-band--dark .kmd-btn--accent {
    border-color: var(--kmd-white);
    background: var(--kmd-white);
    color: var(--kmd-ink);
}

.kmd-section--dark .kmd-btn--accent:hover,
.kmd-section--ink .kmd-btn--accent:hover,
.kmd-cta-band--dark .kmd-btn--accent:hover {
    border-color: var(--kmd-pair-hover);
    background: var(--kmd-pair-hover);
    color: var(--kmd-white);
}

.kmd-section--dark .kmd-btn--light,
.kmd-section--ink .kmd-btn--light,
.kmd-cta-band--dark .kmd-btn--light {
    border-color: var(--kmd-white);
    background: transparent;
    color: var(--kmd-white);
}

.kmd-section--dark .kmd-btn--light:hover,
.kmd-section--ink .kmd-btn--light:hover,
.kmd-cta-band--dark .kmd-btn--light:hover {
    border-color: var(--kmd-pair-hover);
    background: var(--kmd-pair-hover);
    color: var(--kmd-white);
}