/* The account pages (entrar, criar conta, senha) on Noite, the same surface as the site hero
   (design system v8, decisão do Bruno em 10/10/2026). Scoped to the pages that carry .auth-page:
   the working interface keeps its own operational look. Loaded after app.css and dark.css. */
@font-face {
  font-family: Sora;
  src: url("fonts/Sora.ttf") format("truetype");
  font-weight: 100 800;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("fonts/IBMPlexSans-Light.ttf") format("truetype");
  font-weight: 300;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("fonts/IBMPlexSans-Regular.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("fonts/IBMPlexSans-Medium.ttf") format("truetype");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("fonts/IBMPlexMono-Regular.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}

body:has(.auth-page) {
  --noite: #070b10;
  --nevoa: #edf1f4;
  --ferrete: #0d141b;
  --branco: #ffffff;
  --texto-noite-suave: #b9c4ca;
  --linha-noite: rgba(237, 241, 244, 0.16);
  --material-noite-medio: rgba(16, 24, 33, 0.62);
  --fio-de-luz: linear-gradient(120deg, rgba(252, 192, 110, 0.55), rgba(184, 180, 246, 0.25) 45%, rgba(82, 186, 255, 0.55));
  --luz: linear-gradient(100deg, #fcc06e, #b8b4f6 52%, #52baff);
  --foco-noite: #92d2fc;
  --erro-noite: #ffb4a8;
  --mola-padrao: linear(0, 0.102, 0.274, 0.453, 0.598, 0.717, 0.801, 0.864, 0.907, 0.938, 0.958, 0.972, 0.981, 0.988, 0.992, 0.995, 0.997, 0.998, 0.999, 0.999, 1);
  --fonte-titulo: Sora, "IBM Plex Sans", system-ui, sans-serif;
  --fonte-texto: "IBM Plex Sans", system-ui, -apple-system, sans-serif;
  --fonte-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  background: var(--noite);
  color: var(--nevoa);
  color-scheme: dark;
  font-family: var(--fonte-texto);
}

/* the bar: glass over the night, the logotype in cal */
body:has(.auth-page) .app-header {
  background: rgba(7, 11, 16, 0.72);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--linha-noite);
  color: var(--nevoa);
}
body:has(.auth-page) .brand-horizontal { content: url("marca/logotipo-cal.png"); }
body:has(.auth-page) .brand-mark { content: url("marca/simbolo-s-cal.png"); }
body:has(.auth-page) .brand span {
  color: var(--texto-noite-suave);
  border-color: var(--linha-noite);
  font-family: var(--fonte-mono);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* the page: night base and the aurora, warm low on the left, cool high on the right */
.auth-page {
  background: var(--noite);
  justify-content: center;
  padding: 72px 16px 96px;
}
.auth-page::before {
  inset: -10%;
  background:
    radial-gradient(30% 36% at 12% 88%, rgba(252, 192, 110, 0.42) 0%, rgba(255, 231, 194, 0.12) 46%, transparent 72%),
    radial-gradient(40% 46% at 88% 14%, rgba(82, 186, 255, 0.46) 0%, rgba(166, 126, 239, 0.22) 48%, transparent 74%),
    radial-gradient(28% 32% at 74% 80%, rgba(184, 180, 246, 0.26) 0%, transparent 70%),
    radial-gradient(24% 28% at 30% 12%, rgba(108, 218, 255, 0.14) 0%, transparent 70%);
  filter: blur(60px) saturate(1.6) brightness(1.25);
}
/* a veil that settles the card on the darkest part of the scene */
.auth-page::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(520px 420px at 50% 42%, rgba(7, 11, 16, 0.55), transparent 72%);
  pointer-events: none;
}

/* the card: dark glass outlined by a line of light, square corners */
.auth-card {
  max-width: 440px;
  padding: 40px 36px 32px;
  border-radius: 0;
  border: 1px solid transparent;
  background: linear-gradient(var(--material-noite-medio), var(--material-noite-medio)) padding-box, var(--fio-de-luz) border-box;
  -webkit-backdrop-filter: blur(28px);
  backdrop-filter: blur(28px);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
  color: var(--nevoa);
}
.auth-card h1 {
  font-family: var(--fonte-titulo);
  font-weight: 300;
  font-size: 32px;
  line-height: 1.1;
  letter-spacing: -0.03em;
  margin: 0 0 12px;
  color: var(--nevoa);
  text-wrap: balance;
}
.auth-lead {
  margin: 0 0 28px;
  color: var(--texto-noite-suave);
  font-size: 15px;
  line-height: 1.55;
}
.auth-form { gap: 18px; }
.auth-field { gap: 8px; }
.auth-field label {
  font-family: var(--fonte-mono);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--texto-noite-suave);
}
.auth-field input,
.auth-field select {
  min-height: 48px;
  border: 1px solid var(--linha-noite);
  border-radius: 0;
  padding: 10px 14px;
  background: rgba(237, 241, 244, 0.04);
  color: var(--nevoa);
  font-family: var(--fonte-texto);
  font-size: 16px;
  transition: border-color 200ms linear, background-color 200ms linear;
}
.auth-field input:hover,
.auth-field select:hover { border-color: rgba(237, 241, 244, 0.32); }
.auth-field input:focus-visible,
.auth-field select:focus-visible {
  outline: 2px solid var(--foco-noite);
  outline-offset: 2px;
  border-color: transparent;
  background: rgba(237, 241, 244, 0.07);
}
.auth-field input:-webkit-autofill,
.auth-field input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--nevoa);
  -webkit-box-shadow: 0 0 0 1000px #121a22 inset;
  caret-color: var(--nevoa);
}
.auth-field select option { background: var(--ferrete); color: var(--nevoa); }
.auth-field input[aria-invalid="true"],
.auth-field select[aria-invalid="true"] { border-color: var(--erro-noite); }
.auth-hint { color: var(--texto-noite-suave); opacity: 0.8; }

/* the action: nevoa with ferrete text, the primary button of the site */
.auth-card .button {
  min-height: 52px;
  margin-top: 6px;
  border: 0;
  border-radius: 0;
  background: var(--nevoa);
  color: var(--ferrete);
  font-family: var(--fonte-texto);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 0;
  box-shadow: none;
  transition: background-color 200ms linear, transform 550ms var(--mola-padrao);
}
.auth-card .button:hover { background: var(--branco); }
.auth-card .button:active { transform: scale(0.98); }
.auth-card .button:focus-visible { outline: 2px solid var(--foco-noite); outline-offset: 3px; }
.auth-card .button:disabled { background: rgba(237, 241, 244, 0.7); }

.auth-card .error-box {
  border-radius: 0;
  border: 1px solid rgba(255, 180, 168, 0.4);
  background: rgba(255, 120, 100, 0.1);
  color: var(--erro-noite);
}
.auth-ok { color: var(--foco-noite); }
.auth-card .text-button { color: var(--nevoa); }

.auth-links {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--linha-noite);
  font-size: 14px;
}
.auth-links a,
.auth-legal a,
.auth-site a {
  color: var(--nevoa);
  text-decoration-color: rgba(237, 241, 244, 0.35);
  transition: text-decoration-color 200ms linear;
}
.auth-links a:hover,
.auth-legal a:hover,
.auth-site a:hover { text-decoration-color: var(--nevoa); }
.auth-legal { color: var(--texto-noite-suave); }
.auth-check { color: var(--texto-noite-suave); }
.auth-check input { accent-color: var(--nevoa); }
.auth-site { margin-top: 28px; font-size: 14px; }
.auth-site a { color: var(--texto-noite-suave); }

@media (max-width: 760px) {
  .auth-page { padding: 32px 16px 64px; justify-content: flex-start; }
  .auth-card { padding: 28px 20px 24px; }
  .auth-card h1 { font-size: 28px; }
}
@media (prefers-reduced-transparency: reduce) {
  body:has(.auth-page) .app-header,
  .auth-card { -webkit-backdrop-filter: none; backdrop-filter: none; }
  .auth-card { background: var(--noite); border-color: var(--nevoa); }
}
@media (prefers-contrast: more) {
  .auth-card { background: var(--noite); border-color: var(--nevoa); }
  .auth-field input, .auth-field select { border-color: var(--nevoa); }
  .auth-lead, .auth-field label, .auth-site a { color: var(--nevoa); }
}
@media (prefers-reduced-motion: reduce) {
  .auth-card .button { transition: background-color 200ms linear; }
  .auth-card .button:active { transform: none; }
}