:root {
  --basalt-black: #2B2624;
  --quartz-white: #F8F7F4;
  --loam-brown: #5B4B42;
  --artesian-blue: #417B9C;
  --flora-green: #709C65;
  --clay-terracotta: #D69F68;
  --clean-white: #FFFFFF;
}

body {
  background-color: var(--quartz-white);
  color: var(--basalt-black);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Typography Overrides */
h1, h2, h3, h4, h5, h6 {
  color: var(--basalt-black);
}

.text-secondary {
  color: rgba(43, 38, 36, 0.6);
}

/* Custom Component Styles */
.card {
  background-color: var(--clean-white);
  border-radius: 8px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
  transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.card-top-accent {
  border-top: 4px solid var(--artesian-blue);
}

.btn-primary {
  background-color: var(--artesian-blue);
  color: var(--clean-white);
  border-radius: 6px;
  transition: background-color 0.2s, transform 0.1s;
}

.btn-primary:hover {
  background-color: #356784; /* Slightly darker */
  transform: scale(1.02);
}

.btn-secondary {
  background-color: transparent;
  color: var(--loam-brown);
  border: 1px solid var(--loam-brown);
  border-radius: 6px;
  transition: background-color 0.2s, color 0.2s;
}

.btn-secondary:hover {
  background-color: var(--loam-brown);
  color: var(--clean-white);
}

.badge-success {
  background-color: rgba(112, 156, 101, 0.1);
  color: var(--flora-green);
}

.badge-warning {
  background-color: rgba(214, 159, 104, 0.1);
  color: var(--clay-terracotta);
}