/* assets/site.css
   Site-specific styles for MrsGarden.
   Keep this file small. Prefer tokens + component classes from:
   /assets/css/mrsgarden.tokens.css
*/

/* 1) Load tokens + base components FIRST */
@import url("/assets/css/mrsgarden.tokens.css");

/* 2) Minimal safe defaults (do not fight the token file) */
*,
*::before,
*::after{ box-sizing: border-box; }

html, body{ height: 100%; }

body{
  margin: 0;               /* IMPORTANT: layout spacing via .container / sections */
  font-family: inherit;    /* keep tokens font stack */
  background: var(--c-bg);
  color: var(--c-ink);
}

/* 3) Optional: sensible default spacing for plain pages
      Use .page only where you want padding. */
.page{
  padding: var(--sp-8) 0;
}

/* 4) Optional: basic header/footer helper (remove if unused) */
.site-header,
.site-footer{
  padding: var(--sp-6) 0;
}

/* 5) Optional: reduce motion for accessibility */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}