/* SystemFlair colours + logo for the Matrix Authentication Service
 * (auth.systemflair.com: sign-in, password reset, "Manage account").
 * Loaded by configs/mas/templates/{base,app}.html; served by Caddy from
 * static/mas/. MAS uses the same Compound design tokens as Element, so the
 * token block is the same as static/chat/theme.css -- keep them in sync.
 * Unlayered rules beat MAS's @layer cpd-* defaults. Unlike Element, MAS
 * picks light/dark with prefers-color-scheme media queries on :root (no
 * .cpd-theme-dark class), so the tokens sit in the same media queries here
 * -- without them the light navy also applied in dark mode (2026-10-17).
 * Brand: navy #2d388a, cyan #00aeef. */

@media (prefers-color-scheme: light) {
:root {
    --cpd-color-bg-action-primary-rest: #2d388a;
    --cpd-color-bg-action-primary-hovered: #3a47a8;
    --cpd-color-bg-action-primary-pressed: #232c6e;
    --cpd-color-text-action-accent: #2d388a;
    --cpd-color-icon-accent-primary: #2d388a;
    --cpd-color-icon-accent-tertiary: #2d388a;
    --cpd-color-bg-accent-rest: #2d388a;
    --cpd-color-bg-accent-hovered: #3a47a8;
    --cpd-color-bg-accent-pressed: #232c6e;
    --cpd-color-border-interactive-accent: #2d388a;
}
}

/* Dark: primary buttons are brand cyan with Element's own dark "on solid"
 * text. Do NOT override --cpd-color-text-on-solid-primary / icon-on-solid
 * here: tooltips use the same token on a light background, and forcing it to
 * white made them unreadable (2026-10-10). */
@media (prefers-color-scheme: dark) {
:root {
    --cpd-color-bg-action-primary-rest: #00aeef;
    --cpd-color-bg-action-primary-hovered: #33c1f5;
    --cpd-color-bg-action-primary-pressed: #0091c7;
    --cpd-color-text-action-accent: #00aeef;
    --cpd-color-icon-accent-primary: #00aeef;
    --cpd-color-icon-accent-tertiary: #00aeef;
    --cpd-color-bg-accent-rest: #0091c7;
    --cpd-color-bg-accent-hovered: #00aeef;
    --cpd-color-bg-accent-pressed: #007aa8;
    --cpd-color-border-interactive-accent: #00aeef;
}
}

/* Logo above every page (base.html). logo-auto.svg turns its wordmark white
 * in dark mode by itself (prefers-color-scheme inside the SVG). */
.sf-logo {
    display: block;
    height: 34px;
    width: auto;
    max-width: 100%;
    margin: 0 auto;
}