/* ============================================================
   ExamCrack - white surface for the auth pages (Sep 15 2026)

   Loaded by login.html AFTER css/auth.css. Like the landing page's layer it is
   a pure overlay under a body class, so it cannot reach another page.

   WHY A SECOND CLASS: login.html and admin-join.html both carry
   class="login-page" and both load auth.css. The theme therefore hangs off
   body.auth-white, which only login.html carries, so admin-join.html keeps the
   dark theme and its signup/verify steps are untouched.

   Only what the sign-in page actually uses is restated here. auth.css keeps its
   dark palette in 35 rules outside its token block; of those, the sign-in page
   uses the tokens, ::selection, the page background, the grid, the glow, the
   card, the brand mark, the inputs and the two alert texts. The rest (auth-hero,
   auth-highlight, the select, the verify step, the secondary button) belong to
   the signup pages and are left alone.
   ============================================================ */

body.auth-white {
  --bg: #ffffff;
  --panel: #ffffff;
  --surface: #f8f9fa;
  --surface-2: #eef1f5;
  --text-1: #0f172a;
  --text-2: #475569;
  --text-3: #64748b;
  /* Was #94a3b8. On the old dark page that measured 7.80:1, so it worked; on
     white it is 2.56:1 and fails AA at the 12 to 13px sizes this theme uses
     it at. #6b7280 measures 4.83:1 and still reads as the muted tone. */
  --text-4: #6b7280;
  --border-subtle: rgba(15, 23, 42, 0.07);
  --border: rgba(15, 23, 42, 0.10);
  --emerald: #059669;
  --accent-hover: #5a5fe0;   /* darker purple, for contrast on white */
}

body.auth-white ::selection { background-color: rgba(113, 112, 255, 0.18); color: #17181c; }

/* The page background was a hardcoded near-black on .login-page, which is the
   class the signup page also uses, so this is scoped to both classes. */
body.auth-white.login-page { background-color: #ffffff; }

/* The grid was white-on-black and the glow violet; on white the grid inverts
   and the glow takes the network colour so the two agree. */
body.auth-white .login-grid {
  background-image:
    linear-gradient(rgba(15, 23, 42, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15, 23, 42, 0.045) 1px, transparent 1px);
}

body.auth-white .login-glow {
  background-image: radial-gradient(circle, rgba(47, 128, 237, 0.12) 0%, transparent 65%);
}

/* The card stays translucent so the network shows through it, which is what the
   frosted backdrop-filter is for. The 0.45 black shadow is far too heavy on
   white, so it drops to 0.10. */
body.auth-white .login-card {
  background-color: rgba(255, 255, 255, 0.86);
  border-color: rgba(15, 23, 42, 0.08);
  box-shadow:
    0 0 0 1px rgba(15, 23, 42, 0.02) inset,
    0 18px 50px rgba(15, 23, 42, 0.10);
}

body.auth-white .auth-brand-mark { box-shadow: 0 0 24px rgba(113, 112, 255, 0.22); }

/* Inputs were a 2 percent white wash, which is invisible on a white page. */
body.auth-white .field-group input,
body.auth-white .field-group select.select-input {
  background-color: rgba(15, 23, 42, 0.02);
}

/* Component the sign-in page does not use, fixed for correctness anyway. */
body.auth-white .btn-secondary {
  background-color: rgba(15, 23, 42, 0.02);
  border-color: #e2e6ec;
}
body.auth-white .btn-secondary:hover { background-color: rgba(15, 23, 42, 0.05); }

/* Alert text was pale rose and pale mint, chosen against black. Both are
   unreadable on white, and a sign-in error is exactly the text that has to be
   legible. Measured on the tinted backgrounds composited over white:
   error #fca5a5 1.76:1 -> #b91c1c 6.00:1, success #6ee7b7 1.41:1 -> #047857
   5.08:1. Both now pass AA, and both passed nothing before. */
body.auth-white .alert-error { color: #b91c1c; }
body.auth-white .alert-success { color: #047857; }

/* The eyebrow was --accent (#7170ff), which measured 5.20:1 on the old dark page
   and 3.84:1 on white: fine on black, a fail at 10.5px here. The deeper accent
   measures 5.75:1 and is the same hue. */
body.auth-white .login-eyebrow { color: #5b46f6; }