/*
 * Design tokens for the Eternal theme.
 *
 * Lifted from D:\MuServer\x500\Supreme Mu Homepage.dc.html, which is a design
 * tool export: 325 inline style attributes, six <image-slot> custom elements
 * and 37 non-standard style-hover attributes. None of that can be served as
 * is, so the values live here as real CSS and the markup references them.
 *
 * The half-pixel sizes (9.5, 10.5, 11.5, 12.5) are deliberate - they are what
 * the comp specifies and they carry its density. That is the opposite of the
 * rule the Ember theme follows, where such values were arithmetic accidents
 * worth removing. Here they are the design.
 */

:root {
    /* ---- surfaces, darkest to lightest ---------------------------------- */
    --et-bg: #04060a;            /* page */
    --et-panel-deep: #05080e;
    --et-panel: #070c15;
    --et-panel-raised: #080d16;
    --et-panel-blue: #0b1220;
    --et-panel-lit: #0c1626;
    --et-hero-core: #122344;

    /* ---- borders --------------------------------------------------------- */
    --et-line: #131f33;
    --et-line-strong: #1a2740;
    --et-line-panel: #1e2c46;
    --et-line-soft: #16243c;
    --et-line-faint: #1b2840;

    /* ---- text ------------------------------------------------------------ */
    --et-text: #dfe7f2;          /* body */
    --et-text-bright: #eaf3ff;   /* headings, values */
    --et-text-soft: #ccdbee;
    --et-text-muted: #9fb6d2;
    --et-text-dim: #93a7c0;
    --et-text-label: #5f7392;    /* micro labels */
    --et-text-faint: #5d7fa6;
    --et-text-ghost: #4f5d72;

    /* ---- accents --------------------------------------------------------- */
    --et-link: #8fb8e0;
    --et-link-hover: #d5e7fb;
    --et-accent: #7cb2e8;
    --et-accent-deep: #2c5c8f;
    --et-accent-mid: #6d90b8;
    --et-highlight: #cfe3fa;
    --et-accent-bright: var(--et-highlight);
    --et-online: #57c78a;
    --et-danger: #d7646d;
    --et-warning: #d4aa62;
    --et-success: #69bd8b;
    --et-focus: rgba(124, 178, 232, 0.36);

    /* ---- type ------------------------------------------------------------ */
    --et-display: 'Cinzel', Georgia, serif;         /* panel titles, headings */
    /*
     * The wordmark alone. Cinzel Decorative shares Cinzel's Trajan skeleton so
     * it sits with the panel titles, but its swashed R and M give the brand a
     * shape of its own - which a plain Trajan clone does not have.
     */
    --et-wordmark: 'Cinzel Decorative', 'Cinzel', Georgia, serif;
    --et-ui: 'Barlow Condensed', Arial, sans-serif; /* labels, nav, values */
    --et-body: 'Barlow', system-ui, sans-serif;     /* prose */
    --et-heading: var(--et-display);

    /*
     * Kept at the comp's precision on purpose. The condensed face carries the
     * half steps without blurring, and rounding them to whole pixels visibly
     * loosens the panels.
     */
    --et-size-micro: 8px;
    --et-size-label: 9.5px;
    --et-size-xs: 10px;
    --et-size-sm: 10.5px;
    --et-size-base: 11.5px;
    --et-size-md: 12.5px;
    --et-size-lg: 13.5px;
    --et-size-xl: 14.5px;
    --et-size-2xl: 17px;
    --et-size-3xl: 25px;
    --et-size-display: 30px;

    /* Uppercase micro-labels are the backbone of this layout and need opening
       up; the comp tracks them between 1.4 and 1.6px at ~10px. */
    --et-track-label: 0.15em;
    --et-track-nav: 0.12em;

    /* ---- layout ---------------------------------------------------------- */
    --et-shell: 1180px;          /* fixed content width */
    --et-gutter: 14px;
    --et-hero-height: 334px;
    --et-strip-height: 30px;
    --et-control-height: 40px;
    --et-space-1: 4px;
    --et-space-2: 8px;
    --et-space-3: 12px;
    --et-space-4: 16px;
    --et-space-5: 20px;
    --et-space-6: 24px;
}

/* Background: a fine horizontal scanline over a cool radial wash from the top.
   Both come from the comp's root element. */
.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%, rgba(28, 58, 102, 0.4) 0%, rgba(6, 10, 18, 0) 72%);
    color: var(--et-text);
    font-family: var(--et-body);
    -webkit-font-smoothing: antialiased;
}

.theme-supreme-eternal a {
    color: var(--et-link);
    text-decoration: none;
}

.theme-supreme-eternal a:hover,
.theme-supreme-eternal a:focus-visible {
    color: var(--et-link-hover);
}

/* The online indicator is the only continuous status motion retained. */
@keyframes et-pulse {
    0%, 100% { opacity: 1; box-shadow: 0 0 8px 1px rgba(87, 199, 138, 0.75); }
    50%      { opacity: 0.5; box-shadow: 0 0 3px 0 rgba(87, 199, 138, 0.4); }
}

@media (prefers-reduced-motion: reduce) {
    .theme-supreme-eternal *,
    .theme-supreme-eternal *::before,
    .theme-supreme-eternal *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}