/* Standby Alerts — brand theme (docs/brand/colors.md + docs/typography.md). */

/* ── Inter, self-hosted (woff2, latin). Weights 400/600/700/800. ── */
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: optional;
  src: url('../fonts/inter-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: optional;
  src: url('../fonts/inter-latin-600-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: optional;
  src: url('../fonts/inter-latin-700-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 800; font-display: optional;
  src: url('../fonts/inter-latin-800-normal.woff2') format('woff2');
}

:root {
  --sba-font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --sba-navy:    #15324B; /* headers, primary text, top nav */
  --sba-teal:    #14B8A6; /* primary buttons / "available" fills */
  --sba-teal-d:  #0F9488; /* darker teal for hover/contrast */
  --sba-amber:   #F5A623; /* new opening / attention (dark text on it) */
  --sba-green:   #22C55E; /* booked / confirmed */
  --sba-red:     #EF4444; /* errors / failed / opted-out */
  --sba-bg:      #F8FAFC; /* page background */
  --sba-surface: #FFFFFF; /* cards / panels */
  --sba-text:    #1E293B; /* body text */
  --sba-muted:   #94A3B8; /* expired / disabled */

  /* Map onto Bootstrap theme variables */
  --bs-primary:        var(--sba-teal);
  --bs-primary-rgb:    20, 184, 166;
  --bs-body-bg:        var(--sba-bg);
  --bs-body-color:     var(--sba-text);
  --bs-body-font-family: var(--sba-font);
  --bs-link-color:     var(--sba-teal-d);
  --bs-link-hover-color: var(--sba-navy);
}

body {
  font-family: var(--sba-font);
  background-color: var(--sba-bg);
  color: var(--sba-text);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
h1, h2, h3, h4, h5, .card-title { font-weight: 700; }

/* Top nav — light surface so the Navy+Teal wordmark stays legible */
.sba-navbar {
  background-color: var(--sba-surface);
  border-bottom: 1px solid #E2E8F0;
}

/* Wordmark: single word "StandbyAlerts" — Standby=Navy, Alerts=Teal (Inter 800) */
.sba-brand {
  font-family: var(--sba-font);
  font-weight: 800;
  letter-spacing: -.01em;
  text-decoration: none;
  font-size: 1.3rem;
  color: var(--sba-navy); /* "Standby" */
}
.sba-brand .alerts { color: var(--sba-teal); } /* "Alerts" */

/* Auth card */
.sba-auth-wrap { flex: 1 0 auto; display: flex; align-items: center; justify-content: center; padding: 2.5rem 1rem; }
.sba-card {
  background: var(--sba-surface);
  border: 1px solid #E2E8F0;
  border-radius: 14px;
  box-shadow: 0 8px 28px rgba(21, 50, 75, .08);
  width: 100%;
  max-width: 420px;
  padding: 2rem 1.9rem;
}
.sba-card h1 { color: var(--sba-navy); font-size: 1.45rem; font-weight: 700; margin-bottom: .25rem; }
.sba-card .sub { color: #64748B; font-size: .92rem; margin-bottom: 1.4rem; }

/* Primary button = Action Teal fill, white text OK on teal fill */
.btn-sba {
  background-color: var(--sba-teal);
  border-color: var(--sba-teal);
  color: #fff;
  font-weight: 600;
}
.btn-sba:hover, .btn-sba:focus { background-color: var(--sba-teal-d); border-color: var(--sba-teal-d); color: #fff; }

/* Google button — neutral, self-hosted icon */
.btn-google {
  display: flex; align-items: center; justify-content: center; gap: .6rem;
  background: #fff; border: 1px solid #CBD5E1; color: var(--sba-text); font-weight: 600;
}
.btn-google:hover { background: #F1F5F9; border-color: #94A3B8; color: var(--sba-text); }
.btn-google img { display: block; }

/* OR divider */
.sba-or { display: flex; align-items: center; text-align: center; color: var(--sba-muted); margin: 1.1rem 0; font-size: .82rem; text-transform: uppercase; letter-spacing: .08em; }
.sba-or::before, .sba-or::after { content: ""; flex: 1; border-bottom: 1px solid #E2E8F0; }
.sba-or:not(:empty)::before { margin-right: .75rem; }
.sba-or:not(:empty)::after { margin-left: .75rem; }

.sba-links { font-size: .9rem; }
.sba-links a { color: var(--sba-teal-d); }

footer.sba-footer { flex-shrink: 0; color: var(--sba-muted); font-size: .82rem; padding: 1.25rem 0; border-top: 1px solid #E2E8F0; }
footer.sba-footer a { color: var(--sba-muted); text-decoration: none; }
footer.sba-footer a:hover { color: var(--sba-navy); }

/* Landing hero */
.sba-hero { flex: 1 0 auto; display: flex; align-items: center; }
.sba-hero h1 { color: var(--sba-navy); font-weight: 800; }
.sba-badge-amber { background: var(--sba-amber); color: #1E293B; font-weight: 700; }