/*
 * Accent palettes.
 *
 * The theme ships two: `azure`, the cool blue taken from the x500 comp, and
 * `crimson`, a black-and-deep-red reading of the same design. The visitor picks
 * one; the choice rides in a cookie so PHP can render the right state on the
 * first paint, and `data-accent` on the root element is what actually selects
 * the palette here.
 *
 * Why this works without touching a single component rule: every Eternal
 * stylesheet reads `--et-*`, and eternal-remap.css points Ember's `--ember-*`
 * at those same tokens. `var()` resolves at use, not at definition, so moving
 * the values on the root moves the entire cascade beneath it.
 *
 * The one thing tokens cannot reach is the inherited bundle, whose colours are
 * baked-in literals. That is handled by shipping two builds of it and swapping
 * the <link> - see eternal-chrome.js.
 *
 * Derived tokens
 * --------------
 * The block below also names four values that used to be written literally in
 * eternal-home.css and eternal-page.css - the CTA gradient, the inset glow and
 * the panel-head sheen. Literals there would have stayed blue in crimson mode,
 * which is exactly the half-switched look this file exists to avoid.
 */

:root {
    /* Channel triple, for the places that need an alpha of the accent. */
    --et-accent-rgb: 124, 178, 232;

    --et-cta-top: #17304f;
    --et-cta-bottom: #0d1c30;
    --et-glow: rgba(96, 155, 225, 0.18);
    --et-glow-strong: rgba(96, 155, 225, 0.32);
    --et-sheen: rgba(126, 178, 232, 0.08);

    /* Ambient wash behind the page, used by the atmosphere layer. */
    --et-air: rgba(28, 58, 102, 0.4);
    --et-air-far: rgba(6, 10, 18, 0);
}

/* ---- crimson ------------------------------------------------------------- *
 * Near-black surfaces with a red cast rather than a blue one, and a deep red
 * accent. Lightness across the ramp matches the azure set step for step, so
 * text contrast is the same in both palettes - only the hue moves.
 */
:root[data-accent='crimson'] {
    /* ---- surfaces, darkest to lightest ---------------------------------- */
    --et-bg: #060406;
    --et-panel-deep: #0a0709;
    --et-panel: #0e0a0c;
    --et-panel-raised: #120c0f;
    --et-panel-blue: #170e11;
    --et-panel-lit: #1d1216;
    --et-hero-core: #3a1017;

    /* ---- borders --------------------------------------------------------- */
    --et-line: #241417;
    --et-line-strong: #33191e;
    --et-line-panel: #3a1a20;
    --et-line-soft: #2b1418;
    --et-line-faint: #301619;

    /* ---- text ------------------------------------------------------------ *
     * Kept close to neutral with only a trace of warmth. Fully tinted body
     * text reads as a colour cast rather than as a choice.
     */
    --et-text: #e6dcde;
    --et-text-bright: #f6ecee;
    --et-text-soft: #ded0d3;
    --et-text-muted: #bda8ac;
    --et-text-dim: #b09a9e;
    --et-text-label: #8a6c72;
    --et-text-faint: #9c7076;
    --et-text-ghost: #6d585c;

    /* ---- accents --------------------------------------------------------- */
    --et-link: #d98f94;
    --et-link-hover: #f8dfe1;
    --et-accent: #d4454f;
    --et-accent-deep: #6d1219;
    --et-accent-mid: #a8595f;
    --et-highlight: #f2c8cb;

    /* Status green is not part of the accent. An online dot has to read as
       online in both palettes, so it does not move. */
    --et-online: #57c78a;

    /* ---- derived --------------------------------------------------------- */
    --et-accent-rgb: 212, 69, 79;
    --et-cta-top: #4a121a;
    --et-cta-bottom: #250a0e;
    --et-glow: rgba(198, 62, 72, 0.18);
    --et-glow-strong: rgba(198, 62, 72, 0.34);
    --et-sheen: rgba(226, 130, 138, 0.08);
    --et-air: rgba(104, 22, 32, 0.34);
    --et-air-far: rgba(10, 5, 7, 0);
}

/*
 * The page ground. eternal-tokens.css paints this with the azure wash written
 * out; restating it through the tokens lets it follow the switch.
 */
.theme-supreme-eternal {
    background-color: var(--et-bg);
    background-image:
        repeating-linear-gradient(0deg, rgba(150, 185, 230, 0.022) 0 1px, transparent 1px 4px),
        radial-gradient(100% 55% at 50% 0%, var(--et-air) 0%, var(--et-air-far) 72%);
}

:root[data-accent='crimson'] .theme-supreme-eternal {
    background-image:
        repeating-linear-gradient(0deg, rgba(230, 190, 195, 0.02) 0 1px, transparent 1px 4px),
        radial-gradient(100% 55% at 50% 0%, var(--et-air) 0%, var(--et-air-far) 72%);
}

/* ---- the hero artwork ---------------------------------------------------- *
 * The hero is a photograph of a blue storm, and no token reaches into a webp.
 * In crimson it was the one thing left arguing with the rest of the page.
 *
 * A hue rotation is the honest fix here: the art is a single dominant hue, so
 * turning it costs nothing in legibility, and the alternative - a second
 * artwork - is a file the project does not have. 135deg is the distance from
 * the storm's blue to the crimson accent; the small desaturation stops the
 * rotated blues from reading as hot pink, which is where this lands untamed.
 *
 * Filters are composited, so this is not a paint cost on scroll.
 */
:root[data-accent='crimson'] .et-hero__art img {
    filter: hue-rotate(135deg) saturate(0.82) brightness(0.94);
}

/* ---- retrofit: literals that predate the switch -------------------------- *
 * Four values were written out before there was a second palette. They are
 * restated here through the derived tokens at a specificity that wins, rather
 * than edited in place, so the azure sheets stay readable as the reference
 * implementation of the comp.
 */
.theme-supreme-eternal.theme-supreme-eternal .et-cta,
.theme-supreme-eternal.theme-supreme-eternal .btn-primary,
.theme-supreme-eternal.theme-supreme-eternal .btn.btn-primary,
.theme-supreme-eternal.theme-supreme-eternal .ember-ranking-search button,
.theme-supreme-eternal.theme-supreme-eternal .ember-wiki-button--primary,
.theme-supreme-eternal.theme-supreme-eternal .ember-vote-panel-link {
    background: linear-gradient(180deg, var(--et-cta-top), var(--et-cta-bottom));
    box-shadow: inset 0 0 22px var(--et-glow);
}

.theme-supreme-eternal.theme-supreme-eternal .et-panel__head,
.theme-supreme-eternal.theme-supreme-eternal .ember-schedule-panel > header {
    background: linear-gradient(180deg, var(--et-sheen), transparent);
}

.theme-supreme-eternal.theme-supreme-eternal #events.timer-list > div:hover,
.theme-supreme-eternal.theme-supreme-eternal #invasions.timer-list > div:hover,
.theme-supreme-eternal.theme-supreme-eternal #bosses.timer-list > div:hover {
    background: linear-gradient(90deg, rgba(var(--et-accent-rgb), 0.1), rgba(var(--et-accent-rgb), 0.02));
}