/**
 * F1 — shared auth-page styles.
 *
 * The polish audit flagged "~200 lines of CSS duplicated on every auth page". Measured
 * against the actual files, that is not what is happening: the auth pages look alike but
 * are styled differently on purpose (login's card is 24px/40px padding, register's is
 * 28px/48px with a different aura and body padding), and comparing login.php with
 * register.php leaves only three byte-identical rules. Forcing those divergent blocks into
 * one file would have changed the design rather than de-duplicated it.
 *
 * What *was* genuinely duplicated, and now lives here, is the brand lockup used by every
 * auth page:
 *   - .brand-name / .brand-primary / .brand-secondary  — identical in login.php + register.php
 *   - .logo-font-orbitron / .logo-font-gruppo          — identical verbatim in
 *     forgot_password.php, reset_password.php, verify_email.php and verify_magic.php
 *     (and used as extra classes by login + register)
 *
 * Loaded before each page's own <style> block, so any page rule still wins over these.
 */

/* Font-class variants used by the secondary auth pages (and alongside .brand-* below).
   Declared FIRST on purpose: login/register put both classes on the same element, and both
   set font-family with !important — with .brand-* last, its `'Gruppo', cursive` fallback is
   the one that wins, exactly as it did when only .brand-* was defined there. */
.logo-font-orbitron {
    font-family: 'Orbitron', sans-serif !important;
    letter-spacing: -0.03em !important;
    font-weight: 900 !important;
}

.logo-font-gruppo {
    font-family: 'Gruppo', sans-serif !important;
    letter-spacing: 0.44em !important;
    text-transform: uppercase !important;
    margin-right: -0.44em !important;
    font-weight: 900 !important;
    text-shadow: 0.1px 0 0 currentColor, -0.1px 0 0 currentColor;
}

/* Brand lockup — the "SATURN / SELF DEFENCE" wordmark. */
.brand-name {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.brand-primary {
    font-family: 'Orbitron', sans-serif !important;
    font-size: 28px;
    font-weight: 900;
    letter-spacing: -0.03em;
    text-transform: uppercase;
    background: linear-gradient(to right, #2B9B9E, #3FB5B8);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin: 0;
    line-height: 1.1;
}

/* ------------------------------------------------------------------
   Light/dark theme toggle (includes/theme_toggle.php).
   Colours come from style.css's theme-aware custom properties, so the
   button adapts with the active theme without extra rules.
   ------------------------------------------------------------------ */
.auth-theme-toggle {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 60;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    padding: 0;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    background: var(--bg-card);
    color: var(--text-main);
    cursor: pointer;
    transition: color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.auth-theme-toggle:hover {
    color: var(--brand-teal);
    border-color: var(--brand-teal);
    transform: rotate(12deg);
}

.auth-theme-toggle svg {
    width: 18px;
    height: 18px;
}

.auth-theme-toggle .theme-icon-sun {
    display: none;
}

[data-theme="dark"] .auth-theme-toggle .theme-icon-sun {
    display: block;
}

[data-theme="dark"] .auth-theme-toggle .theme-icon-moon {
    display: none;
}

.brand-secondary {
    font-family: 'Gruppo', cursive !important;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.44em;
    text-transform: uppercase;
    color: #ffffff;
    margin: 0;
    margin-right: -0.44em;
    line-height: 1.1;
    text-shadow: 0.1px 0 0 #fff, -0.1px 0 0 #fff;
}

/* ------------------------------------------------------------------
   Light theme for login.php and register.php.

   Those two pages are designed dark-on-dark (a slate gradient with glass
   cards) and hardcode rgba(255,255,255,…)/white rather than using
   theme variables, so they need an explicit light palette. Scoped to the
   .auth-page body class, which only those two pages carry, so the other
   auth pages (which already follow the theme via style.css) are untouched.
   ------------------------------------------------------------------ */
[data-theme="light"] .auth-page {
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    color: #0f172a;
}

[data-theme="light"] .auth-page .brand-secondary {
    color: #0f172a;
    text-shadow: 0.1px 0 0 #0f172a, -0.1px 0 0 #0f172a;
}

[data-theme="light"] .auth-page .auth-card {
    background: rgba(255, 255, 255, 0.9);
    border-color: rgba(15, 23, 42, 0.08);
    box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.18);
}

[data-theme="light"] .auth-page .auth-title,
[data-theme="light"] .auth-page .success-title {
    color: #0f172a;
    text-shadow: none;
}

[data-theme="light"] .auth-page .auth-subtitle,
[data-theme="light"] .auth-page .auth-desc,
[data-theme="light"] .auth-page .success-msg {
    color: rgba(15, 23, 42, 0.65);
    text-shadow: none;
}

[data-theme="light"] .auth-page .login-tabs {
    background: rgba(15, 23, 42, 0.05);
    border-color: rgba(15, 23, 42, 0.06);
}

[data-theme="light"] .auth-page .login-tab {
    color: rgba(15, 23, 42, 0.55);
}

[data-theme="light"] .auth-page .login-tab.active {
    background: #ffffff;
    color: #0f172a;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
}

[data-theme="light"] .auth-page .form-label,
[data-theme="light"] .auth-page .input-label {
    color: rgba(15, 23, 42, 0.55);
}

[data-theme="light"] .auth-page .form-input,
[data-theme="light"] .auth-page .input-field {
    background: #ffffff;
    border-color: rgba(15, 23, 42, 0.15);
    color: #0f172a;
}

[data-theme="light"] .auth-page .form-input:focus,
[data-theme="light"] .auth-page .input-field:focus {
    background: #ffffff;
    border-color: #2B9B9E;
}

[data-theme="light"] .auth-page .btn-side {
    background: #ffffff;
    border-color: rgba(15, 23, 42, 0.12);
    color: rgba(15, 23, 42, 0.7);
}

[data-theme="light"] .auth-page .btn-side:hover {
    background: #f1f5f9;
    color: #0f172a;
}

[data-theme="light"] .auth-page .auth-footer,
[data-theme="light"] .auth-page .footer {
    color: rgba(15, 23, 42, 0.6);
}

[data-theme="light"] .auth-page .stepper-bar {
    background: rgba(15, 23, 42, 0.08);
}

[data-theme="light"] .auth-page .stepper-info {
    color: rgba(15, 23, 42, 0.4);
}

[data-theme="light"] .auth-page .alert-error,
[data-theme="light"] .auth-page .error-toast {
    color: #b91c1c;
}

[data-theme="light"] .auth-page .alert-success {
    color: #047857;
}

/* Muted footnote text (login + register) that must stay legible in both themes.
   Explicit colours rather than var(--text-main) so register.php works without style.css. */
.auth-note {
    color: rgba(15, 23, 42, 0.6);
}

[data-theme="dark"] .auth-note {
    color: rgba(255, 255, 255, 0.5);
}