:root {
  --color-sanctuary: #004c51;
  --color-sanctuary-dark: #00363a;
  --color-dawn: #faf8db;
  --color-hope: #ffeda9;
  --color-teal-accent-2: #d4f4ee;
  --color-ink: #012527;
  --color-page-bg: #f6f6f5;

  --font-heading: "Antonio", Arial, Helvetica, sans-serif;
  --font-ui: "Work Sans", Arial, Helvetica, sans-serif;
  --font-body: "Karla", Arial, Helvetica, sans-serif;
  --font-arabic: "Noto Kufi Arabic", "Work Sans", Tahoma, sans-serif;
}

body {
  font-family: var(--font-body);
  color: var(--color-ink);
  background-color: var(--color-page-bg);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--color-sanctuary);
}

.btn, .form-label, label, .form-control, .form-select, th,
.nav-link, input, select, textarea, table {
  font-family: var(--font-ui);
}

[lang="ar"], [dir="rtl"], .text-arabic {
  font-family: var(--font-arabic);
}

a {
  color: var(--color-sanctuary);
}

a:hover {
  color: var(--color-sanctuary-dark);
}

/* Top navbar */
.navbar {
  background-color: var(--color-sanctuary) !important;
  padding-top: 0.85rem;
  padding-bottom: 0.85rem;
}

.navbar-brand {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.navbar-brand .brand-logo {
  height: 64px;
  width: auto;
}

.navbar-brand .brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.navbar-brand .brand-title {
  font-family: var(--font-heading);
  font-size: 1.75rem;
  font-weight: 600;
  color: #fff;
}

.navbar-brand .brand-subtitle {
  font-family: var(--font-ui);
  font-size: 1rem;
  color: var(--color-teal-accent-2);
}

.navbar .nav-link {
  color: #fff !important;
  font-weight: 500;
}

.navbar .nav-link:hover {
  color: var(--color-hope) !important;
}

.navbar-toggler {
  border-color: rgba(255, 255, 255, 0.4);
}

/* Sidebar */
.sidebar {
  background-color: #fff !important;
  border-right: 1px solid var(--color-teal-accent-2) !important;
}

.sidebar-heading {
  color: var(--color-sanctuary);
  font-family: var(--font-ui);
  font-weight: 700;
  letter-spacing: 0.04em;
}

.sidebar .nav-link {
  color: var(--color-ink);
  border-radius: 0.375rem;
  padding: 0.4rem 0.75rem;
}

.sidebar .nav-link:hover {
  background-color: var(--color-teal-accent-2);
  color: var(--color-sanctuary);
}

/* Buttons */
.btn-primary {
  background-color: var(--color-sanctuary);
  border-color: var(--color-sanctuary);
}

.btn-primary:hover, .btn-primary:focus {
  background-color: var(--color-sanctuary-dark);
  border-color: var(--color-sanctuary-dark);
}

.btn-success {
  background-color: var(--color-sanctuary);
  border-color: var(--color-sanctuary);
}

.btn-success:hover, .btn-success:focus {
  background-color: var(--color-sanctuary-dark);
  border-color: var(--color-sanctuary-dark);
}

/* Tables */
.table thead {
  background-color: var(--color-teal-accent-2);
}

.table thead th {
  color: var(--color-sanctuary);
  font-weight: 600;
  border-bottom-width: 2px;
}

/* Cards / content surfaces */
main {
  background-color: #fff;
}

/* Footer */
.footer {
  background-color: var(--color-sanctuary);
  color: var(--color-teal-accent-2);
}

.footer a {
  color: #fff;
}