@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:wght@600;700&family=Instrument+Sans:wght@400;500&display=swap');

:root {
  --primary: #0D5C55;        /* bahari */
  --primary-color: #0D5C55;
  --bg-color: #FAF6EF;       /* karatasi */
  --bg-light-gray: #FAF6EF;
  --card-bg: #ffffff;
  --text-color: #0B1F1C;     /* ink */
  --text-light: #5A6B68;     /* kivuli */
  --border-color: rgba(11, 31, 28, 0.12);
  --control-bg: #FAF6EF;
}

body {
  background-color: var(--bg-color) !important;
  font-family: "Instrument Sans", sans-serif;
}

.page-card-head h4 {
  font-family: "Bricolage Grotesque", serif;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.for-login .page-card,
.for-forgot .page-card,
.for-signup .page-card,
.for-email-login .page-card,
.for-login-with-email-link .page-card {
  border-radius: 16px;
  border-color: var(--border-color);
  box-shadow: none;
}

.brand-wordmark {
  display: inline-block;
  font-family: "Bricolage Grotesque", serif;
  font-weight: 700;
  font-size: 1.4rem;
  color: var(--text-color);
  letter-spacing: -0.02em;
  text-decoration: none;
}

.btn-primary,
.btn-login,
.btn-forgot,
.btn-login-with-email-link {
  background-color: var(--primary) !important;
  border-color: var(--primary) !important;
  box-shadow: none !important;
}

.btn-primary:hover,
.btn-login:hover,
.btn-forgot:hover,
.btn-login-with-email-link:hover {
  opacity: 0.88;
}

.for-login a,
.for-forgot a,
.for-signup a,
.sign-up-message a,
.forgot-password-message a {
  color: var(--primary);
}

.safarispay-signup-link {
  text-align: center;
  margin-top: 1rem;
  color: var(--text-light);
  font-size: 0.9rem;
}