/* Reskin van de inlog-/register- en legal-pagina's in de landing-stijl
   (licht, Fredoka-koppen, platte knoppen met harde onderrand).
   Laden NA app.css. */

:root, :root[data-theme="dark"] {
    color-scheme: light;
    --l-purple: #8a6fe0;
    --l-purple-dark: #6e51d1;
    --l-navy: #3c3552;
    --l-body: #75718a;
    --l-line: #e5e5e5;
}

body.auth-body, body.legal-body {
    background: #fff !important;
    font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif !important;
    color: var(--l-body) !important;
}

/* zachte paarse cirkels als achtergrond, zoals de hero-disc op de homepage */
.auth-bg {
    background:
        radial-gradient(420px 420px at 88% 12%, #f4f1fc 0 58%, transparent 60%),
        radial-gradient(340px 340px at 8% 86%, #f4f1fc 0 58%, transparent 60%) !important;
    opacity: 1 !important;
}

.auth-card, .legal-card {
    background: #fff !important;
    border: 2px solid var(--l-line) !important;
    border-radius: 20px !important;
    box-shadow: 0 4px 0 var(--l-line) !important;
}

.auth-head h1, .auth-panel h2,
.legal-card h1, .legal-card h2 {
    font-family: 'Fredoka', 'Plus Jakarta Sans', sans-serif !important;
    font-weight: 600 !important;
    color: var(--l-navy) !important;
}
.auth-head h1 { color: var(--l-purple) !important; }
.legal-card h2 { color: var(--l-purple) !important; }

.auth-panel label span { color: var(--l-navy); font-weight: 600; }
.auth-panel input[type="email"],
.auth-panel input[type="password"],
.auth-panel input[type="text"] {
    background: #fff !important;
    border: 2px solid var(--l-line) !important;
    border-radius: 14px !important;
    color: var(--l-navy) !important;
}
.auth-panel input:focus {
    border-color: var(--l-purple) !important;
    box-shadow: 0 0 0 3px rgba(138,111,224,.18) !important;
    outline: none !important;
}

/* Knoppen: plat paars vlak met harde onderrand, hoofdletters (landing-stijl) */
.auth-panel .btn-primary, .legal-card .btn-primary {
    background: var(--l-purple) !important;
    border: 2px solid transparent !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 0 var(--l-purple-dark) !important;
    color: #fff !important;
    font-family: 'Fredoka', sans-serif !important;
    font-weight: 600 !important;
    letter-spacing: .8px;
    text-transform: uppercase;
    transition: filter .12s, transform .05s, box-shadow .05s !important;
}
.auth-panel .btn-primary:hover { filter: brightness(1.07); }
.auth-panel .btn-primary:active {
    transform: translateY(4px);
    box-shadow: 0 0 0 var(--l-purple-dark) !important;
}

.btn-oauth {
    border: 2px solid var(--l-line) !important;
    border-radius: 14px !important;
    box-shadow: 0 3px 0 var(--l-line) !important;
    background: #fff !important;
    color: var(--l-navy) !important;
    font-weight: 600 !important;
}
.btn-oauth:hover { background: #fafafa !important; }

/* Discord houdt zijn eigen merkkleur i.p.v. het witte standaardvlak hierboven */
.btn-oauth.discord {
    background: #5865F2 !important;
    border-color: #5865F2 !important;
    color: #fff !important;
}
.btn-oauth.discord:hover { background: #4853d4 !important; }

.auth-links a, .legal-back {
    color: var(--l-purple) !important;
    font-weight: 700;
}
.lang-toggle {
    border: 2px solid var(--l-line) !important;
    border-radius: 100px !important;
    box-shadow: 0 2px 0 var(--l-line) !important;
    background: #fff !important;
    color: var(--l-purple) !important;
    font-weight: 700 !important;
}
.auth-msg { border-radius: 12px; }