/*
 * Palette remap.
 *
 * Ember declares its whole visual language as custom properties on :root -
 * gold, red, surfaces, lines, lifts and rings - and its several hundred
 * component rules only ever reference those variables. Redefining the
 * variables under the Eternal body class therefore converts every inherited
 * component at once, instead of chasing them rule by rule the way the first
 * few fixes did.
 *
 * Custom properties do not participate in specificity the way declarations do:
 * a definition on `.theme-supreme-eternal` beats the one on `:root` for every
 * element inside it, because it is simply closer in the tree. That is why this
 * works where the earlier per-rule overrides kept losing.
 *
 * Loaded last, after eternal-adapt.css.
 */

.theme-supreme-eternal {
    /* ---- surfaces --------------------------------------------------------
     * Ember's are warm near-blacks with a violet cast; Eternal's are cool.
     * Alpha values are preserved so anything layering two surfaces keeps its
     * intended depth.
     */
    --ember-bg: var(--et-bg);
    --ember-panel: var(--et-panel);
    --ember-panel-soft: var(--et-panel-raised);
    --ember-surface: rgba(7, 12, 21, 0.9);
    --ember-surface-hi: rgba(11, 18, 32, 0.95);
    --ember-surface-deep: rgba(4, 7, 12, 0.94);
    --ember-page-bg: var(--et-bg);
    --ember-page-surface: rgba(7, 12, 21, 0.72);
    --ember-page-surface-strong: rgba(11, 18, 32, 0.9);
    --ember-page-surface-deep: rgba(4, 7, 12, 0.92);

    /* ---- lines ------------------------------------------------------------ */
    --ember-line: rgba(150, 185, 230, 0.14);
    --ember-line-red: rgba(124, 178, 232, 0.38);

    /*
     * Gold becomes the blue accent. Ember uses --ember-gold for emphasis of
     * every kind - headings, active states, borders, icons - so this single
     * mapping is what turns the amber tiles, tabs and buttons blue.
     */
    --ember-gold: var(--et-accent);
    --ember-gold-bright: var(--et-highlight);
    --ember-gold-deep: var(--et-accent-deep);

    /*
     * Red has no counterpart in this palette. Mapped to the deeper blue rather
     * than kept crimson: in Ember it marks active tabs and section eyebrows,
     * not errors, so leaving it red would put the one warm colour on the page
     * exactly where the eye goes first.
     */
    --ember-red: var(--et-accent);
    --ember-red-bright: var(--et-highlight);
    --ember-red-deep: var(--et-accent-deep);

    /* ---- text ------------------------------------------------------------- */
    --ember-text: var(--et-text);
    --ember-muted: var(--et-text-dim);
    --ember-faint: var(--et-text-label);

    /* ---- type ------------------------------------------------------------- */
    --ember-heading: var(--et-display);
    --ember-body: var(--et-body);
    --ember-numeric: var(--et-ui);

    /* ---- depth ------------------------------------------------------------ *
     * The rings and edge lights are tinted gold in Ember and would keep a warm
     * halo on every panel edge even after the surfaces went cool.
     */
    --ember-ring: inset 0 0 0 1px rgba(124, 178, 232, 0.13);
    --ember-ring-hover: inset 0 0 0 1px rgba(124, 178, 232, 0.3);
    --ember-lift-hover: inset 0 1px 0 rgba(178, 214, 250, 0.12), 0 28px 58px rgba(0, 0, 0, 0.5);
    --ember-edge-light: linear-gradient(90deg, transparent, rgba(124, 178, 232, 0.5), transparent);

    /*
     * Ember's per-page aliases. Each page group re-points these at the base
     * tokens, but several were given literal values instead, so they need
     * naming here or those pages stay warm.
     */
    --home-gold: var(--et-accent);
    --home-gold-bright: var(--et-highlight);
    --home-muted: var(--et-text-dim);
    --home-faint: var(--et-text-label);
    --home-heading: var(--et-display);
    --home-body: var(--et-body);
    --features-heading: var(--et-display);
    --features-body: var(--et-body);
    --features-red: var(--et-accent);
    --rank-heading: var(--et-display);
    --rank-body: var(--et-body);
    --downloads-heading: var(--et-display);
    --downloads-body: var(--et-body);
    --vip-heading: var(--et-display);
    --vip-body: var(--et-body);
    --footer-body: var(--et-body);
}