/* ============================================
   BASE.CSS
   Reset · CSS Variables · Global Styles
   ============================================ */

/* ─── RESET ─── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ─── CSS VARIABLES (Design Tokens) ─── */
/*
  ╔══════════════════════════════════════════╗
  ║  EDIT THESE to retheme the entire site   ║
  ║  instantly.  Everything pulls from here. ║
  ╚══════════════════════════════════════════╝
*/
:root {
  /* Colours - Natural Farmstead Palette */
  --cream:       #faf8f3;
  --cream-dark:  #ede8df;
  --warm-brown:  #7a8b6f;    /* Soft sage green */
  --deep-brown:  #4a5845;    /* Deep forest green */
  --gold:        #9ca88a;    /* Muted olive */
  --gold-light:  #b8c5a8;    /* Soft meadow green */
  --charcoal:    #3c4138;    /* Natural charcoal with green undertone */
  --text-muted:  #6d7768;    /* Muted moss */

  /* Typography */
  --font-serif:  'Cormorant Garamond', Georgia, serif;
  --font-sans:   'Inter', system-ui, sans-serif;

  /* Spacing scale (optional — use where helpful) */
  --space-sm:    0.75rem;
  --space-md:    1.5rem;
  --space-lg:    3rem;
  --space-xl:    7rem;
}

/* ─── GLOBAL ─── */
html { scroll-behavior: smooth; }

body {
  font-family: var(--font-sans);
  background-color: var(--cream);
  color: var(--charcoal);
  font-size: 15px;
  line-height: 1.6;
  overflow-x: hidden;
}

a { text-decoration: none; color: inherit; }

img { display: block; max-width: 100%; }

/* ─── GRAIN OVERLAY ─── */
/* Subtle noise texture over the whole page for a tactile, rustic feel */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 999;
  opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 256px 256px;
}