/* Bio Eara — colors sampled from the supplied logo.
   Dark ink and green text variants keep small text readable. */
:root {
  --bio-green: #84b130;
  --bio-green-hover: #97c344;
  --bio-green-text: #466519;
  --bio-blue: #374d7f;
  --bio-ink: #243657;
  --bio-paper: #f7f8f5;
  --bio-soft: #eef3e5;
  --bio-border: #dbe4d0;
  --navy: var(--bio-ink);
  --blue: var(--bio-blue);
  --bg: var(--bio-paper);
  --text: var(--bio-ink);
  --muted: #586552;
  --border: var(--bio-border);
  --albi-yellow: var(--bio-green);
  --albi-ink: var(--bio-ink);
  --albi-paper: var(--bio-paper);
  --shell-gold: var(--bio-green);
  --shell-ink: var(--bio-ink);
  --shell-soft: var(--bio-soft);
  --shell-footer: var(--bio-ink);
  --admin-ink: var(--bio-ink);
  --admin-ink-2: var(--bio-blue);
  --admin-gold: var(--bio-green);
  --admin-gold-hover: var(--bio-green-hover);
  --admin-bg: var(--bio-paper);
  --admin-surface: #fff;
  --admin-muted: #586552;
  --admin-line: var(--bio-border);
  --admin-line-subtle: var(--bio-soft);
}

/* Show the original logo without the previous circular zoom/crop. */
.albi-logo-crop, .login-logo-crop, .admin-brand-mark {
  position: relative;
  width: 86px;
  height: 54px;
  flex: 0 0 86px;
  border-radius: 8px;
  overflow: hidden;
  background: #f8f8f8;
  border: 0;
  box-shadow: none;
}
.albi-logo-crop img, .login-logo-crop img, .admin-brand-mark img {
  position: absolute;
  width: 100%;
  height: auto;
  max-width: 100%;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  object-fit: contain;
}
.albi-brand { font-size: 22px; letter-spacing: .035em; }
.albi-hero-art { background: var(--bio-soft); color: var(--bio-ink); }
.albi-hero-logo {
  width: min(100%, 360px);
  aspect-ratio: 1.55;
  border-radius: 14px;
  background: #f8f8f8;
}
.albi-hero-logo img {
  position: absolute;
  width: 100%;
  height: auto;
  max-width: 100%;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  object-fit: contain;
}
.public-header { background: rgb(247 248 245 / 97%); }
.hero-kicker, .home-hero h1 span, .footer-brand span { color: var(--bio-green-hover); }
.hero-primary, .reassurance-card { background: var(--bio-green); color: var(--bio-ink); }
.hero-primary:hover { background: var(--bio-green-hover); }
.albi-store :focus-visible { outline-color: var(--bio-green-text); }
.hero-actions :focus-visible, .public-footer :focus-visible { outline-color: var(--bio-green-hover); }
.admin-sidebar { background: var(--bio-blue) !important; }
.admin-sidebar > a.active { background: var(--bio-green) !important; color: var(--bio-ink) !important; }
.admin-brand { gap: 10px; }
.admin-brand-mark { width: 64px; height: 42px; flex-basis: 64px; }
.admin-brand strong { font-size: 18px; }
.admin-brand small { color: #dce5d0; }
.admin .eyebrow { color: var(--bio-green-text); }

/* Login is a light panel on the leaf's blue, with the same controls and layout. */
body.login-page {
  background: var(--bio-blue) !important;
  background-image: radial-gradient(circle at 15% 20%, rgb(132 177 48 / 25%), transparent 55%) !important;
  color: var(--bio-ink);
}
.login-card { background: var(--bio-paper); border-color: var(--bio-border); }
.login-logo-crop { width: 144px; height: 88px; }
.login-header h1, .input-field-group label { color: var(--bio-ink); }
.login-header p, .input-icon, .toggle-password-btn, .back-to-store { color: #586552; }
.login-badge { color: var(--bio-green-text); border-color: var(--bio-border); background: var(--bio-soft); }
.input-wrapper input { color: var(--bio-ink); background: #fff; border-color: var(--bio-border); }
.input-wrapper input::placeholder { color: #65705e; }
.input-wrapper input:focus { background: #fff; border-color: var(--bio-green-text); }
.toggle-password-btn:hover { color: var(--bio-ink); background: var(--bio-soft); }
.login-card-footer { border-color: var(--bio-border); }
.back-to-store:hover { color: var(--bio-green-text); }
.login-security-notice, .login-security-notice svg { color: #e1e8d9; }
.login-error { background: #fef2f2; color: #991b1b; border-color: #fecaca; }
.login-page :focus-visible { outline: 3px solid var(--bio-green-text); outline-offset: 3px; }
.error-brand { color: var(--bio-ink); }
.error-brand span { color: var(--bio-green-text); }

@media (max-width: 600px) {
  .albi-brand { font-size: 16px; gap: 7px; }
  .albi-brand small { font-size: 6px; letter-spacing: .06em; }
  .albi-logo-crop { width: 51px; height: 35px; flex-basis: 51px; }
  .albi-hero-logo { width: min(100%, 250px); }
}
@media (max-width: 360px) {
  .albi-brand { font-size: 14px; }
  .albi-logo-crop { width: 42px; height: 29px; flex-basis: 42px; }
}