/* AirSpire Health — custom CSS. Tailwind (utility classes in markup) is the
   primary styling engine; this file holds only what utilities can't express:
   base type/background, the green/yellow/red zone system, and a few keyframes. */

:root {
  --navy-900: #0a1d3a;
  --emerald-500: #10b981;
  --emerald-600: #059669;
  --zone-green: #10b981;
  --zone-yellow: #f59e0b;
  --zone-red: #ef4444;
  --bg-app: #f1faf6;
}

html { font-family: 'Plus Jakarta Sans', system-ui, sans-serif; }
body { color: #0a1628; -webkit-font-smoothing: antialiased; }
.font-display { font-family: 'Fraunces', 'Plus Jakarta Sans', serif; letter-spacing: -0.02em; }
.text-balance { text-wrap: balance; }
.gradient-cta { background: linear-gradient(135deg, #10b981 0%, #047857 100%); }
.gradient-hero-image { background: linear-gradient(135deg, #fb923c 0%, #c2410c 50%, #581c87 100%); }
.brand-logo, .brand-logo-footer { height: 62px; width: auto; object-fit: contain; }

/* Public-page form inputs (Bootstrap-class-compatible) */
input.form-control, textarea.form-control, select.form-control, select.form-select {
  width: 100%;
  padding: 0.78rem 0.95rem;
  border: 1px solid #dbe3ee;
  border-radius: 0.55rem;
  background-color: #fff;
  color: #0a1628;
  font-size: 0.95rem;
  transition: border-color .15s, box-shadow .15s;
}
input.form-control:focus, textarea.form-control:focus, select.form-control:focus, select.form-select:focus {
  outline: none; border-color: #10b981; box-shadow: 0 0 0 4px rgb(16 185 129 / 0.12);
}

/* The HTML hidden attribute must beat Tailwind display utilities. */
[hidden] { display: none !important; }

/* ---- Asthma zone system (green / yellow / red) ------------------------- */
.zone-green  { --z: var(--zone-green);  }
.zone-yellow { --z: var(--zone-yellow); }
.zone-red    { --z: var(--zone-red);    }

.zone-chip {
  display: inline-flex; align-items: center; gap: .4rem;
  font-weight: 700; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase;
  padding: .25rem .6rem; border-radius: 9999px; color: #fff; background: var(--z, #64748b);
}
.zone-dot { width: .55rem; height: .55rem; border-radius: 9999px; background: var(--z, #64748b); display: inline-block; }
.zone-band-green  { background: #ecfdf5; border-color: #a7f3d0; }
.zone-band-yellow { background: #fffbeb; border-color: #fde68a; }
.zone-band-red    { background: #fef2f2; border-color: #fecaca; }
.text-zone { color: var(--z); }

/* gradient CTA surfaces */
.bg-gradient-cta { background: linear-gradient(135deg, #10b981 0%, #047857 100%); }
.bg-hero-mesh {
  background:
    radial-gradient(900px 400px at 85% -10%, rgba(16,185,129,.18), transparent 60%),
    radial-gradient(700px 500px at -10% 110%, rgba(8,114,183,.14), transparent 55%),
    var(--bg-app);
}

/* peak-flow bar chart */
.pf-bar { transition: height .4s ease; border-radius: 6px 6px 0 0; }

@keyframes pulse-red { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
.pulse-red { animation: pulse-red 1.6s ease-in-out infinite; }

@keyframes fade-in-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.fade-in-up { animation: fade-in-up .35s ease-out both; }

/* simple range slider accent */
input[type="range"] { accent-color: var(--emerald-600); }