/* ===== LAYER 1: CSS Reset + Design Tokens ===== */

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
  font-family: var(--font-body, 'Montserrat', sans-serif);
  background: var(--white, #FFFFFF);
  color: var(--text-body, #3D3D3D);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

/* ===== Design Tokens (defaults — overridden by skin) ===== */
:root {
  --white: #FFFFFF;
  --off-white: #FAFAF8;
  --light-gray: #F2F0ED;
  --mid-gray: #E8E5E0;
  --black: #1A1A1A;
  --text-dark: #1A1A1A;
  --text-body: #3D3D3D;
  --text-muted: #7A7672;
  --text-light: #A8A4A0;
  --accent: #B8A080;
  --accent-soft: #C8B898;
  --accent-muted: rgba(184,160,128,0.15);
  --font-display: 'Tangerine', cursive;
  --font-serif: 'Crimson Pro', Georgia, serif;
  --font-body: 'Montserrat', -apple-system, sans-serif;
  --font-script: 'Tomato Pasta', cursive;
}

/* ===== Utilities ===== */
.container { max-width: 1100px; margin: 0 auto; }
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ===== Scroll Reveal ===== */
.fade-in {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}