/* assets/css/base.css */
@import url('tokens.css');

/* 1. Box sizing & smooth scrolling */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  
  font-size: 100%; /* Respect user browser settings */
}

/* 2. Body defaults */
body {
  font-family: var(--font-body);
  background-color: var(--color-cream);
  color: var(--color-forest);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* 3. Typography defaults */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.2;
  color: var(--color-forest);
}

p {
  margin-bottom: var(--space-sm);
  color: var(--color-text-muted);
}

/* 4. Images & SVGs */
img, svg {
  max-width: 100%;
  height: auto;
  display: block;
}

/* 5. Utility: Container */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-padding);
}