/* auth-layouts.css — the sign-in and error page surface.
 *
 * Ported from master_template_login2 (src/styles.css + src/lib/layouts.ts), a
 * Tailwind 4 source this app cannot compile. That template offered 28 layouts
 * behind a switcher; **56 "Steel centred" was chosen**, and this file is what
 * survives — the steel mesh, the raised card, and the two measurements they use.
 *
 * WHY SEMANTIC CLASSES AND NOT TAILWIND UTILITIES
 * ───────────────────────────────────────────────
 * The React source composes the look out of utilities — `bg-card/95
 * backdrop-blur-xl border-border/60 shadow-xl`, `max-w-md`, `rounded-2xl`.
 * ci_ube's style.css is a PREBUILT, PURGED bundle: a utility ci_data never
 * wrote does not exist here, and the browser ignores it in silence. Composing
 * from utilities would have meant a card with no shadow or no width limit
 * looking like a design decision rather than a missing rule.
 *
 * So each ROLE gets one class, in plain CSS, guaranteed to resolve.
 *
 * The role names are kept even though only one value of each remains: the shell
 * reads them from the layout spec (ube_auth_helper.php), so changing the look
 * later is editing that spec and adding a class here — not rewriting markup.
 */

:root {
  --brand-foreground: oklch(0.98 0.005 250);
}

/* ── the page ────────────────────────────────────────────────────────── */

.auth-shell      { min-height: 100vh; }
.auth-on-dark    { color: var(--brand-foreground); }

/* The card's width. */
.auth-w-md { max-width: 28rem; }

/* Controls and the card carry their own radius — kept as two roles because
   they are not the same number, and a card that matched its inputs looked
   like an input. */
.auth-r-soft   { border-radius: 0.75rem; }
.auth-cr-soft  { border-radius: 1rem; }

/* ── the card ────────────────────────────────────────────────────────── */

.auth-card-raised {
  background-color: var(--card);
  border: 1px solid color-mix(in srgb, var(--border) 40%, transparent);
  box-shadow: 0 25px 50px -12px color-mix(in srgb, var(--primary) 18%, transparent);
}

/* ── the surface ─────────────────────────────────────────────────────── */

.mesh-steel {
  background-color: oklch(0.22 0.03 255);
  background-image:
    radial-gradient(at 20% 20%, oklch(0.45 0.09 250 / 85%) 0px, transparent 55%),
    radial-gradient(at 80% 40%, oklch(0.38 0.07 268 / 85%) 0px, transparent 50%),
    radial-gradient(at 50% 95%, oklch(0.3  0.06 240 / 85%) 0px, transparent 55%);
  color: var(--brand-foreground);
}