:root {
  /* Color Variables */
  --primary: #0F172A;
  --primary-dark: rgba(15, 23, 42, 0.8);
  --accent: #F2F593;
  --light: #ffffff;
  --light-accent: #F3F4F6;
  --secondary: #4B5563;
  --minimum: #1C8C93;
}

body {
  font-family: 'Noto Serif', serif;
  background-color: var(--primary);
  color: var(--light);
}

.font-serif {
  font-family: 'Noto Serif', serif;
}

.font-sans {
  font-family: 'PT Sans', sans-serif;
}

.text-primary {
  color: var(--primary);
}

.text-secondary {
  color: var(--secondary);
}

.text-accent {
  color: var(--accent);
}
.text-minimum{
    color: var(--minimum);
}

.bg-primary {
  background-color: var(--primary);
}

.bg-primary-dark {
  background-color: var(--primary-dark);
}

.bg-accent {
  background-color: var(--accent);
}

.bg-light {
  background-color: var(--light);
}

.bg-light-accent {
  background-color: var(--light-accent);
}

.border-accent {
  border-color: var(--accent);
}

.border-light-accent {
  border-color: var(--light-accent);
}

.placeholder-gray-600::placeholder {
  color: #4B5563;
}

button:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--accent);
}