/* src/styles.css */
:root {
  --primary-color: #C76A67;
  --primary-color-dark: #8f6164;
  --secondary-color: #DBC078;
  --secondary-color-dark: #C7AE6A;
  --neutral-off-white: #F7F7F7;
  --neutral-light-grey: #E0E0E0;
  --neutral-medium-grey: #777777;
  --neutral-dark-charcoal: #333333;
  --system-success: #4CAF50;
  --system-error: #F44336;
  --mpesa-red: #E30513;
  --logo-font: "Parisienne";
  --headings-font: "Alice", serif;
  --body-font: "Varela Round", sans-serif;
  --primary-button-text-color: #FFFFFF;
  --primary-button-text-hover-color: #FFFFFF;
  --secondary-button-text-color: #333333;
  --secondary-button-text-hover-color: #F7F7F7;
  --bs-navbar-padding-x: 0rem;
  --bs-navbar-padding-y: 0rem;
}
html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  overflow-x: hidden;
}
body {
  font-family: var(--body-font);
  background-color: var(--neutral-off-white);
  color: var(--neutral-dark-charcoal);
  transition: background-color 0.3s ease, color 0.3s ease;
  line-height: 1.6;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--headings-font);
  color: var(--neutral-dark-charcoal);
  margin-top: 0;
  margin-bottom: 0.75rem;
  line-height: 1.3;
}
a {
  color: var(--primary-color);
  text-decoration: none;
}
a:hover {
  color: var(--secondary-color);
  text-decoration: underline;
}
.btn {
  transition:
    color 0.15s ease-in-out,
    background-color 0.15s ease-in-out,
    border-color 0.15s ease-in-out,
    box-shadow 0.15s ease-in-out;
  font-weight: 500;
  border: 2px solid transparent;
}
.btn:hover {
  text-decoration: none;
}
.btn-primary {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
  color: var(--primary-button-text-color);
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  background-color: var(--primary-color-dark);
  color: var(--primary-button-text-hover-color);
  border-color: var(--primary-color-dark);
}
.btn-outline-primary {
  border-color: var(--primary-color);
  color: var(--neutral-dark-charcoal);
}
.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active {
  background-color: var(--secondary-color-dark);
  color: var(--secondary-button-text-hover-color);
  border-color: var(--secondary-color-dark);
}
.btn-secondary {
  background-color: var(--secondary-color);
  border-color: var(--secondary-color);
  color: var(--secondary-button-text-color);
  box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.4);
}
.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:active {
  background-color: var(--secondary-color-dark);
  color: var(--secondary-button-text-hover-color);
  border-color: var(--secondary-color-dark);
}
.btn-outline-secondary {
  color: var(--neutral-off-white);
}
.btn-outline-secondary:hover,
.btn-outline-secondary:focus,
.btn-outline-secondary:active {
  background-color: var(--primary-color-dark);
  color: var(--neutral-off-white);
  border-color: var(--secondary-color-dark);
}
.btn.disabled,
.btn:disabled,
fieldset:disabled .btn {
  color: var(--bs-btn-disabled-color);
  pointer-events: none;
  background-color: var(--neutral-medium-grey);
  border-color: var(--primary-color);
  opacity: var(--bs-btn-disabled-opacity);
}
.text-primary {
  color: var(--primary-color) !important;
}
.text-secondary {
  color: var(--secondary-color) !important;
}

/* angular:styles/global:styles */
/*# sourceMappingURL=styles.css.map */