/* Sobrescreve a página /login do Hermes com o Design System Spotify.
   Injetado pelo nginx (sub_filter) antes de </head>. */
@import url('/_theme/fonts.css');

:root {
  --background-base: #121212;
  --background: #121212;
  --midground: #1ed760;
  --foreground: #ffffff;
  --hairline: rgba(255, 255, 255, 0.08);
  --hairline-strong: rgba(255, 255, 255, 0.2);
}

html, body,
h1, .brand, .subtitle, .form-title, .field-label, .field-input,
.provider-btn, .form-error, footer {
  font-family: 'Figtree', 'Helvetica Neue', helvetica, arial, sans-serif !important;
}

/* sem o quadriculado âmbar: verde nunca é decorativo */
body { background-image: none; }

.brand {
  color: #b3b3b3;
  letter-spacing: 0.2em;
  font-weight: 700;
}
.brand .dot { background: #1ed760; border-radius: 50%; }

.card {
  background: #181818;
  border: 0;
  border-radius: 8px;
  box-shadow: rgba(0, 0, 0, 0.5) 0 8px 24px;
}

h1 {
  text-transform: none;
  font-weight: 800;
  font-size: 1.75rem;
  letter-spacing: -0.02em;
}

.subtitle { color: #b3b3b3; }

.form-title {
  color: #b3b3b3;
  font-weight: 700;
  letter-spacing: 0.14em;
}
.field-label {
  color: #b3b3b3;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.field-input {
  background: #1f1f1f;
  color: #ffffff;
  border: 0;
  border-radius: 500px;
  padding: 0.8rem 1.25rem;
  box-shadow: rgb(124, 124, 124) 0 0 0 1px inset;
}
.field-input:focus-visible {
  outline: none;
  box-shadow: #ffffff 0 0 0 2px inset;
}

/* preenchimento automático do navegador pinta o campo de azul-claro: neutraliza */
.field-input:-webkit-autofill,
.field-input:-webkit-autofill:hover,
.field-input:-webkit-autofill:focus,
.field-input:autofill {
  -webkit-text-fill-color: #ffffff;
  caret-color: #ffffff;
  box-shadow: rgb(124, 124, 124) 0 0 0 1px inset, 0 0 0 1000px #1f1f1f inset !important;
  transition: background-color 9999s ease-out 0s;
}

.provider-btn {
  background: #1ed760;
  color: #000000;
  border-radius: 500px;
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 1.8px;
  padding: 1rem 1.5rem;
  box-shadow: none;
  transition: transform 0.15s ease, background-color 0.15s ease;
}
.provider-btn:hover { filter: none; background: #3be477; transform: scale(1.03); }
.provider-btn:active { filter: none; transform: scale(0.99); }
.provider-btn:focus-visible { outline: 2px solid #ffffff; outline-offset: 3px; }

.form-error { color: #f3727f; }

footer { color: #7c7c7c; }
footer .sep { background: #4d4d4d; }

::selection { background: #1ed760; color: #000000; }