/* 1) Add on-surface-variant for bodyMedium parity */
:root {
  --color-primary: #0e4c3d;
  --color-secondary: #c8a34a;
  --color-surface: #faf6eb;
  --color-on-surface: #101513;
  --color-on-surface-variant: #4f5a56; /* subtle, readable */
  --color-surface-highest: #f1e8d1;
  --shadow-ev4: 0 4px 6px rgba(14, 76, 61, 0.25);
}

/* 2) Body + titles to mirror Flutter weights */
body {
  font-family:
    "Inter",
    system-ui,
    -apple-system,
    Segoe UI,
    Roboto,
    sans-serif;
}
h1,
h2,
h3 {
  font-family: "Cinzel", serif;
  font-weight: 600;
}
h2 {
  font-family: "EB Garamond", serif;
  font-weight: 600;
}

/* 3) BodyMedium uses onSurfaceVariant like Flutter */
p,
li {
  color: var(--color-on-surface);
}
small,
.body-variant {
  color: var(--color-on-surface-variant);
}

/* 4) Card elevation + tint feel */
.card {
  background-color: var(--color-surface-highest);
  box-shadow: var(--shadow-ev4);
  border-radius: 16px;
}

/* 5) Elevated button to match Flutter (EB Garamond, Title Case, 16px radius) */
button,
.button {
  background-color: var(--color-primary);
  color: var(--color-surface);
  font-family: "EB Garamond", serif; /* was Cinzel */
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 0.5px;
  text-transform: none; /* Title Case, not ALL CAPS */
  padding: 14px 24px;
  border-radius: 16px; /* was 32px */
  border: none;
  box-shadow: 0 2px 4px rgba(14, 76, 61, 0.25);
  transition:
    box-shadow 0.2s,
    transform 0.02s,
    opacity 0.2s;
}
button:hover,
.button:hover {
  box-shadow: 0 4px 8px rgba(14, 76, 61, 0.3);
}
button:active,
.button:active {
  transform: translateY(1px);
}
button:disabled,
.button:disabled {
  opacity: 0.5;
  box-shadow: none;
  cursor: not-allowed;
}

/* 6) FAB style (if you use one on web) to mirror Flutter FAB */
.fab {
  background-color: var(--color-primary);
  color: #fff;
  border-radius: 16px;
  padding: 12px 16px;
  font-family: "Cinzel", serif;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 1.1px;
}

/* 7) Dark theme to mirror Flutter’s dark ColorScheme */
@media (prefers-color-scheme: dark) {
  :root {
    --color-primary: #4da388;
    --color-secondary: #c8a34a;
    --color-surface: #111917;
    --color-on-surface: #e2e7e4;
    --color-on-surface-variant: #a6b0ac;
    --color-surface-highest: #1b2422;
  }
  body {
    background-color: var(--color-surface);
    color: var(--color-on-surface);
  }
  a {
    color: var(--color-primary);
  }
  .card {
    background-color: var(--color-surface-highest);
  }
}