/* ─────────────────────────────────────────────────────────────
   Auth chrome → SDI brand (admin gap analysis, sprint S2).

   Scoped to .auth-page: the legacy CSS is var-driven, so re-mapping the
   tokens on the wrapper re-skins the card/forms/links without touching
   any other legacy surface (base.html keeps its teal --accent globally —
   the documented collision that blocks loading brand.css shell-wide).
   Palette values mirror tokens/brand.css; do not drift.
   ───────────────────────────────────────────────────────────── */

.auth-page {
    /* SDI navy primary; gold is the spotlight (brand icon dot, mesh) */
    --accent: #1B2A4A;
    --accent-hover: #24365C;
    --accent-muted: rgba(27, 42, 74, 0.08);
    --accent-border: rgba(27, 42, 74, 0.28);
    --gold: #C8911B;
    font-family: 'Spline Sans', sans-serif;
}

/* Navy is invisible on the dark surface — gold carries the brand there
   (the same inversion the SDI sidebar uses: navy ground, gold accents). */
[data-theme="dark"] .auth-page {
    --accent: #E0B65A;
    --accent-hover: #F0C96C;
    --accent-muted: rgba(224, 182, 90, 0.12);
    --accent-border: rgba(224, 182, 90, 0.35);
}
[data-theme="dark"] .auth-page .btn-primary {
    color: #13203B;
}

.auth-page .auth-brand-text,
.auth-page .auth-header h1 {
    font-family: 'Spline Sans', sans-serif;
    letter-spacing: -0.01em;
}

/* Gradient mesh: teal tints → navy/steel/gold. The light-theme selector
   matches style.css's specificity so load order decides. */
:root:not([data-theme="dark"]) .auth-page::before {
    background:
        radial-gradient(ellipse 600px 400px at 20% 30%, rgba(27, 42, 74, 0.07), transparent),
        radial-gradient(ellipse 500px 350px at 80% 70%, rgba(200, 145, 27, 0.05), transparent);
}
:root[data-theme="dark"] .auth-page::before {
    background:
        radial-gradient(ellipse 600px 400px at 20% 30%, rgba(224, 182, 90, 0.07), transparent),
        radial-gradient(ellipse 500px 350px at 80% 70%, rgba(46, 90, 140, 0.08), transparent),
        radial-gradient(ellipse 400px 300px at 50% 50%, rgba(200, 145, 27, 0.04), transparent);
}