/* ==========================================================================
   Dark mode
   Switched on by the CIPIT SuperLens dark mode button, which adds
   html.cipit-superlens-darkmode (before first paint, from the visitor's saved choice).
   The theme is built on colour tokens, so most of the work is giving the tokens dark values.
   The brand red stays the original CIPIT red. Ink is both text and the fill of dark buttons,
   which turn light with dark text, the usual dark mode inversion.
   1. Tokens  2. Selection  3. Ink fills  4. Surfaces  5. Header and logo  6. Pasted content
   7. Media
   ========================================================================== */

/* 1. Tokens ================================================================ */

html.cipit-superlens-darkmode {
    color-scheme: dark;

    /* Shared with the fallback themes (theme.css). */
    --c-brand-tint: #2a1b1d;
    --c-ink: #f3eeef;
    --c-body: #c9c1c4;
    --c-muted: #a0989b;
    --c-line: #332e30;
    --c-line-strong: #433c3f;
    --c-soft: #1a1718;
    --c-paper: #1d1a1b;
    --c-night: #0e0d0d;
    --c-charcoal: #262223;
    --c-surface-dark: #262223;
    --c-contrast: #fff;
    --c-brand-on-dark: #ff8a8d;
    --c-success: #6fd39b;
    --c-success-bg: #15281d;
    --c-info: #8ab8f2;
    --c-info-bg: #16212f;
    --c-warning: #eab45a;
    --c-warning-bg: #2c2214;
    --c-error: #ff8a8d;
    --c-error-bg: #2f1718;

    /* Elegante. */
    --el-brand-deep: #5c1014;
    --el-ink: #f3eeef;
    --el-ink-soft: #ddd6d8;
    --el-body: #bdb5b8;
    --el-muted: #a0989b;
    --el-subtle: #8f878a;
    --el-chip: #272325;
    --el-line-strong: rgba(255, 255, 255, .14);
    --el-line: rgba(255, 255, 255, .1);
    --el-line-soft: rgba(255, 255, 255, .08);
    --el-hair: rgba(255, 255, 255, .07);
    --el-paper: #141213;
    --el-band: #1f191b;
    --el-band-edge: rgba(255, 255, 255, .04);
    --el-band-deep: #2b2224;
    --el-placeholder: #241f21;
    --el-placeholder-ink: #6d6467;
    --el-stripe-1: #221e20;
    --el-stripe-2: #1d1a1b;
    --el-dark: #2a2426;
    --el-dark-deep: #1d1a1b;
    --el-dark-soft: #2e2a2c;
    --el-tint: rgba(196, 22, 28, .18);
    --el-shadow: 0 1px 1px rgba(0, 0, 0, .25), 0 2px 6px -2px rgba(0, 0, 0, .35);
    --el-shadow-hover: 0 1px 2px rgba(0, 0, 0, .3), 0 12px 28px -14px rgba(0, 0, 0, .7);
    --el-card-line-hover: rgba(196, 22, 28, .55);

    /* Read as text only by the accordion's titles. */
    --secondary-color: var(--c-ink);

    /* The brand red for fills, read by the SuperLens panel. */
    --el-dm-fill: var(--el-brand);
    --el-dm-fill-dark: var(--el-brand-dark);
}

html.cipit-superlens-darkmode body {
    background-color: var(--el-paper);
}

/* 2. Selection ============================================================ */

html.cipit-superlens-darkmode ::selection {
    background-color: var(--el-brand);
    color: #fff;
}

/* 3. Ink fills: dark buttons turn light, with dark text ===================== */

html.cipit-superlens-darkmode :is(
    .ev-edition.is-current,
    .podcast-card__listen,
    .pagination .page-numbers.next,
    .skip-link:focus,
    .digest-item:hover .digest-arrow,
    .share__copied:not(:empty),
    .newsletter__form .btn--primary,
    a.el-hero__cta
) {
    color: var(--el-paper);
}

/* 4. Surfaces ============================================================== */

/* The footer: a dark band instead of a red one, keeping the rings from the top-right. */
html.cipit-superlens-darkmode .el-footer {
    background:
        radial-gradient(circle 640px at 100% 0%, transparent 0, #1d191a 100%),
        repeating-radial-gradient(circle at 100% 0%, transparent 0 20px, rgba(196, 22, 28, .14) 20px 21px),
        #1d191a;
    border-top: 1px solid var(--el-line);
}

html.cipit-superlens-darkmode .el-footer__bottom {
    background: #0f0d0e;
}

/* Accordion (custom-accordion): the open header is a red fill under white text. Its inline
   styles use !important, so these do too. */
html.cipit-superlens-darkmode div.custom-accordion .accordion-item.active :is(.accordion-header, .accordion-header:hover, .accordion-header:focus) {
    background: var(--el-brand) !important;
}

html.cipit-superlens-darkmode div.custom-accordion .accordion-item:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, .35) !important;
}

/* The ink call-to-action band (Team page and others): a raised dark card. */
html.cipit-superlens-darkmode .band {
    background:
        radial-gradient(circle 560px at 100% 50%, transparent 0, var(--el-dark) 100%),
        repeating-radial-gradient(circle at 100% 50%, transparent 0 20px, rgba(255, 255, 255, .06) 20px 21px),
        var(--el-dark);
    box-shadow: inset 0 0 0 1px var(--el-line);
}

html.cipit-superlens-darkmode .entry-video {
    background: #000;
}

/* 5. Header and logo ======================================================= */

/* The header logo has dark lettering; dark mode and SuperLens's dark contrast show the light
   version printed beside it. */
.el-brand__logo--dark {
    display: none;
}

html:is(.cipit-superlens-darkmode, .cipit-superlens-dark) .el-brand__logo--dark {
    display: block;
}

html:is(.cipit-superlens-darkmode, .cipit-superlens-dark) .el-brand__logo:not(.el-brand__logo--dark) {
    display: none;
}

/* 6. Pasted content ======================================================== */

/* Posts pasted from Word or Google Docs carry inline colours chosen for a white page (black
   text, dark blue links, white highlights). In dark mode they take the theme's colours. */
html.cipit-superlens-darkmode :is(.prose, .entry-content) :is(span, font, u, p, strong, em, b, i, a, li, td, th, h1, h2, h3, h4, h5, h6)[style*="color"] {
    color: inherit !important;
}

html.cipit-superlens-darkmode :is(.prose, .entry-content) font[color] {
    color: inherit;
}

html.cipit-superlens-darkmode :is(.prose, .entry-content) :is(span, p, font, strong, em, td, th, div)[style*="background"] {
    background-color: transparent !important;
}

/* 7. Media ================================================================= */

/* Photos a touch dimmer, so they do not glare against the dark page. */
html.cipit-superlens-darkmode :is(.prose, .entry-content) img:not([src$=".svg"]) {
    filter: brightness(.92);
}