:root {
  /* Define color variables based on stroke order */
  --primary-color: #666F02;       /* for elements matching stroke="#E7ECBE" */
  --primary-hover: #d1cfae;       /* a slightly darker shade */
  --secondary-color: #AABB70;     /* for elements matching stroke="#E4E5DB" */
  --secondary-hover: #cacac4;     /* a slightly darker shade */
}

body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #333;
}

h2.card-title {
  font-family: "Howard Sans", sans-serif;
  font-weight: 700;
}

/* Button styles updated to match stroke colors */
.btn-primary {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
}

.btn-primary:hover {
  background-color: var(--primary-hover);
  border-color: var(--primary-hover);
}

/* Use secondary color for these buttons */
.btn-success,
.btn-warning {
  background-color: var(--secondary-color);
  border-color: var(--secondary-color);
}

.btn-success:hover,
.btn-warning:hover {
  background-color: var(--secondary-hover);
  border-color: var(--secondary-hover);
}

/* Anchor link styling */
a {
  color: var(--primary-color);
  text-decoration: none;
}

a:hover,
a:focus {
  text-decoration: underline;
}

/* Card styling tweaks */
.card {
  border: none;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
}