/* ======================================================
   style.css
   Using DM Sans for headings & Work Sans for body text
   with balanced weights (400/500).
   ====================================================== */

/* 1) Import DM Sans & Work Sans from Google Fonts */
@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500&family=Work+Sans:wght@400;500&display=swap");

/* 2) Root Variables */
:root {
  --primary-color: rgba(85, 145, 95, 0.98);
  --secondary-color: #8AC38A;
  --accent-color: #2A3F3F;
  --body-color: #ffffff;
  --dark-color: #333333;
  --light-gray: #f0f0f0;

  /* Font & Typography tokens */
  --font-family-body: "Work Sans", Helvetica, Arial, sans-serif;
  --font-family-heading: "DM Sans", Helvetica, Arial, sans-serif;

  /* Heading sizes */
  --h1-size: 2.8rem;
  --h2-size: 2rem;
  --h3-size: 1.6rem;

  --p-size: 1rem;
  --line-height: 1.7;
}

/* 3) Base Reset & Body Styles */
html, body {
  margin: 0;
  padding: 0;
  font-family: var(--font-family-body);
  font-size: var(--p-size);
  line-height: var(--line-height);
  background-color: var(--body-color);
  color: var(--dark-color);
}

/* 4) Headings */
h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
  margin-bottom: 0.5em;
  font-family: var(--font-family-heading);
  font-weight: 400;   /* normal weight for all headings */
  line-height: 1.2;
}

h1 {
  font-size: var(--h1-size);
}
h2 {
  font-size: var(--h2-size);
  line-height: 1.3;
  font-weight: 500;   /* slightly bolder for H2 */
}
h3 {
  font-size: var(--h3-size);
  line-height: 1.3;
  font-weight: 500;   /* slightly bolder for H3 */
}

/* 5) Paragraphs */
p {
  margin: 0 0 1em;
  font-family: var(--font-family-body);
}

/* 6) Links */
a {
  color: #0069B4;
  text-decoration: none;
  transition: color 0.2s;
}

/* 7) Basic Container Utility */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 15px;
}

/* Minimal reset for lists */
ul, ol {
  margin: 0;
  padding: 0 0 0 20px;
}

/* 8) Example Button Styling */
.button {
  display: inline-block;
  padding: 0.6em 1.2em;
  font-size: 1rem;
  border-radius: 4px;
  background-color: #0069B4;
  color: #fff;
  text-decoration: none;
  font-family: inherit;
  transition: background-color 0.2s;
}

.button:hover {
  background-color: #00528d;
}

/* 9) Scribe-specific (e.g. .hero, .section-wrapper…) */
/*    Keep these in your inline or main stylesheet as needed */

/* 10) Media Queries (Responsive adjustments) */
@media (max-width: 480px) {
  /* Adjust heading sizes on small screens */
  h1 {
    font-size: 2rem;
    line-height: 1.2;
  }
  h2 {
    font-size: 1.6rem;
  }
}