/*
 * Loaded inside the TinyMCE editing frame only (content_css), so what the
 * client types looks like what the page renders. Mirrors the body styling that
 * frontend/src/pages/Page.tsx applies to page.body, and the tokens in
 * frontend/src/index.css — keep the two in step.
 */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500;600&family=Inter:wght@400;500;600&display=swap');

body {
  font: 400 16px/1.7 'Inter', system-ui, sans-serif;
  color: #22372f; /* ink */
  background: #faf6ee; /* cream */
  margin: 0;
  padding: 26px 30px;
  max-width: 42rem;
  -webkit-font-smoothing: antialiased;
}

h2,
h3 {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 600;
  line-height: 1.18;
  color: #1b4332; /* forest-700 */
}
h2 {
  font-size: 1.4rem;
  margin: 2.5rem 0 1rem;
}
h3 {
  font-size: 1.15rem;
  margin: 2rem 0 0.75rem;
}
h2:first-child,
h3:first-child {
  margin-top: 0;
}

p {
  color: #6b7f74; /* muted */
  margin: 0 0 1rem;
}

ul,
ol {
  margin: 1.5rem 0;
  padding-left: 1.25rem;
  display: grid;
  gap: 0.75rem;
}
li {
  font-weight: 500;
}

a {
  color: #245741; /* palm-600 */
  text-decoration: underline;
}

img {
  margin: 2rem 0;
  width: 100%;
  height: auto;
  border-radius: 1.5rem;
  object-fit: cover;
  box-shadow: 0 20px 50px -22px rgb(27 67 50 / 0.28);
}
