:root {
  --primary: #3f51b5;
  --primary-dark: #283593;
  --sidebar-start: #1a237e;
  --sidebar-end: #283593;
  --content-bg: #f0f2f5;
  --card-radius: 12px;
  --site-font-family: 'Poppins', 'Segoe UI', sans-serif;
  --site-font-size: 16px;
  --site-text-color: #1f2528;
  --site-muted-color: #69757d;
  --site-accent-color: #2f5b62;
  --site-heading-font-family: 'Outfit', 'Poppins', 'Segoe UI', sans-serif;
}

html,
body {
  font-family: var(--site-font-family);
  font-size: var(--site-font-size);
  color: var(--site-text-color);
  line-height: 1.6;
}

body,
p,
span,
div,
li,
a,
button,
input,
textarea,
select,
label {
  font-family: inherit;
  color: inherit;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--site-heading-font-family);
  color: var(--site-text-color);
  line-height: 1.25;
  margin: 0;
}

p {
  margin: 0 0 1rem;
}

small,
.text-muted,
.muted {
  color: var(--site-muted-color);
}

.fade-in {
  animation: fadeIn 240ms ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}