/* HolaRoof CVI override for Hermes dashboard login page.
   Loaded AFTER the inline template styles — equal specificity wins by order. */

@font-face {
  font-family: 'Sansation';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('/holaroof-branding/Sansation_Light-s.p.1eb95be9.ttf') format('truetype');
}
@font-face {
  font-family: 'Sansation';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/holaroof-branding/Sansation_Regular-s.p.bb43e56d.ttf') format('truetype');
}
@font-face {
  font-family: 'Sansation';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/holaroof-branding/Sansation_Bold-s.p.0d25e16f.ttf') format('truetype');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('/holaroof-branding/83afe278b6a6bb3c-s.p.3a6ba036.woff2') format('woff2');
}

:root {
  --background-base: #fffdfa; /* HolaRoof cream */
  --background: #fffdfa;
  --midground: #fdb612;       /* HolaRoof amber */
  --foreground: #643720;      /* HolaRoof brown */
  --hairline: rgba(100, 55, 32, 0.15);
  --hairline-strong: rgba(100, 55, 32, 0.30);
}

html, body {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  background: var(--background-base);
  color: var(--foreground);
}

/* Warm sunlight glow instead of the dark dot-grid. */
body {
  background-image: radial-gradient(
    ellipse at top,
    rgba(253, 182, 18, 0.14) 0%,
    transparent 55%
  );
  background-size: auto;
}

/* Wordmark: hide "NousResearch", show HOLAROOF. */
.brand {
  font-size: 0;
  color: var(--foreground);
}
.brand .dot { display: none; }
.brand::before {
  content: 'HOLAROOF';
  font-family: 'Sansation', 'Inter', sans-serif;
  font-weight: 700;
  font-size: 1.35rem;
  letter-spacing: 0.28em;
  color: #643720;
}
.brand::after {
  content: '';
  display: block;
  width: 34px;
  height: 4px;
  margin: 0.55rem auto 0;
  background: #fdb612;
  border-radius: 2px;
}

.card {
  background: #ffffff;
  border: 1px solid rgba(100, 55, 32, 0.12);
  border-radius: 16px;
  box-shadow: 0 18px 50px -18px rgba(100, 55, 32, 0.28);
}

h1 {
  font-family: 'Sansation', 'Inter', sans-serif;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0.01em;
  color: #643720;
}

.subtitle {
  color: #967869;
}

.form-title,
.field-label {
  font-family: 'Inter', sans-serif;
  color: #967869;
}

.field-input {
  background: #fffdfa;
  color: #643720;
  border: 1px solid rgba(100, 55, 32, 0.25);
  border-radius: 10px;
}
.field-input:focus {
  border-color: #fdb612;
  outline: 2px solid rgba(253, 182, 18, 0.45);
  outline-offset: 0;
}

.provider-btn {
  background: #fdb612;
  color: #643720;
  font-family: 'Sansation', 'Inter', sans-serif;
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 10px;
  box-shadow: 0 8px 20px -8px rgba(253, 182, 18, 0.7);
  transition: filter 0.12s ease-out, transform 0.12s ease-out;
}
.provider-btn:hover {
  filter: brightness(1.05);
  transform: translateY(-1px);
}
.provider-btn:active {
  filter: brightness(0.95);
  transform: translateY(0);
}
.provider-btn:focus-visible {
  outline: 2px solid #643720;
  outline-offset: 3px;
}

footer {
  color: #967869;
}