:root {
  --header-height: 80px;
}

::-webkit-scrollbar {
  display: none;
}

@font-face {
  font-family: "DGAgnadeen";
  src: url("assats/fonts/DGAgnadeen-Thin.ttf") format("truetype");
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "DGAgnadeen";
  src: url("assats/fonts/DGAgnadeen-Ultralight.ttf") format("truetype");
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "DGAgnadeen";
  src: url("assats/fonts/DGAgnadeen-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "DGAgnadeen";
  src: url("assats/fonts/DGAgnadeen-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "DGAgnadeen";
  src: url("assats/fonts/DGAgnadeen-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "DGAgnadeen";
  src: url("assats/fonts/DGAgnadeen-Extrabold.ttf") format("truetype");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "DGAgnadeen";
  src: url("assats/fonts/DGAgnadeen-Heavy.ttf") format("truetype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

* {
  font-family:
    "DGAgnadeen",
    system-ui,
    -apple-system,
    "Segoe UI",
    Arial,
    sans-serif;
}

.glass {
  background: linear-gradient(135deg,
      rgba(255, 255, 255, 0.62),
      rgba(255, 255, 255, 0.38)) !important;
  border: 1px solid rgba(16, 185, 129, 0.16) !important;
  box-shadow:
    0 22px 70px rgba(15, 92, 66, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.55) !important;
  backdrop-filter: blur(26px) saturate(160%);
  -webkit-backdrop-filter: blur(26px) saturate(160%);
}

.glass-lite {
  background: linear-gradient(135deg,
      rgba(255, 255, 255, 0.52),
      rgba(255, 255, 255, 0.28)) !important;
  border: 1px solid rgba(255, 255, 255, 0.5) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(22px) saturate(150%);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
}

.glass-dark {
  background: linear-gradient(135deg,
      rgba(17, 24, 39, 0.55),
      rgba(17, 24, 39, 0.32)) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(26px) saturate(140%);
  -webkit-backdrop-filter: blur(26px) saturate(140%);
}

.dark .glass {
  background: linear-gradient(135deg,
      rgba(17, 24, 39, 0.62),
      rgba(17, 24, 39, 0.32)) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  box-shadow:
    0 22px 70px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
  backdrop-filter: blur(26px) saturate(140%);
  -webkit-backdrop-filter: blur(26px) saturate(140%);
}

.dark .glass-lite {
  background: linear-gradient(135deg,
      rgba(17, 24, 39, 0.52),
      rgba(17, 24, 39, 0.26)) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(22px) saturate(135%);
  -webkit-backdrop-filter: blur(22px) saturate(135%);
}

.dark .text-primary-green {
  color: rgb(167, 243, 208) !important;
}

.dark .text-gray-500 {
  color: rgb(156, 163, 175) !important;
}

.dark .text-gray-600 {
  color: rgb(203, 213, 225) !important;
}

.dark .text-gray-700 {
  color: rgb(226, 232, 240) !important;
}

.dark .text-gray-800 {
  color: rgb(241, 245, 249) !important;
}

.dark .bg-white {
  background-color: rgba(17, 24, 39, 0.62) !important;
}

.dark .bg-emerald-50 {
  background-color: rgba(16, 185, 129, 0.08) !important;
}

.dark .bg-emerald-100 {
  background-color: rgba(16, 185, 129, 0.16) !important;
}

.dark .border-emerald-100 {
  border-color: rgba(255, 255, 255, 0.12) !important;
}

.dark .border-emerald-200 {
  border-color: rgba(255, 255, 255, 0.14) !important;
}

.dark .text-emerald-custom {
  color: rgb(110, 231, 183) !important;
}

.fade-in {
  animation: fadeIn 1s ease-in;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.input-field {
  width: 100%;
  padding: 1rem 1.25rem;
  padding-right: 3rem;
  /* reserved for search icon */
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(16, 185, 129, 0.2);
  border-radius: 1.25rem;
  color: #1a1a1a;
  font-size: 1rem;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.dark .input-field {
  background: rgba(17, 24, 39, 0.5);
  border-color: rgba(255, 255, 255, 0.1);
  color: #f3f4f6;
}

.input-field:focus {
  outline: none;
  border-color: #10b981;
  box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.1);
  background: rgba(255, 255, 255, 0.7);
  transform: translateY(-1px);
}

.dark .input-field:focus {
  background: rgba(17, 24, 39, 0.7);
  border-color: #10b981;
}

.input-field::placeholder {
  color: #9ca3af;
}

.dark .input-field::placeholder {
  color: #6b7280;
}

.label-field {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  font-size: 0.9375rem;
  font-weight: 700;
  color: #0d5c42;
  margin-bottom: 0.75rem;
  letter-spacing: -0.01em;
}

.dark .label-field {
  color: #10b981;
}