:root {
  /* --- New Soft & Modern Palette --- */
  --primary-green:    #556B2F; /* DarkOliveGreen */
  --dark-green-text:  #26432B; /* Mörkare skogsgrön */
  --accent-terracotta: #D8AFA0; /* Gentle Terracotta */
  --warm-beige-bg:   #F5F1E8; /* Warm Beige Background */
   --off-white:        #EFE7DD; /* Mjuk off‑white */
  --subtle-gray:     #B0B0B0; /* Subtle Gray for borders/details */
  --white-text:      #FFFFFF;

  /* --- Existing Spacing (Keep for now) --- */
  --space-xs:   4px;
  --space-sm:   8px;
  --space-md:  16px;
  --space-lg:  24px;
  --space-xl:  32px;

  /* --- New Typography --- */
  --font-heading: 'Playfair Display', serif;
  --font-body:  'Lato', sans-serif;
  /* Keep --font-hand for hero title if desired, or switch later */
  --font-hand:  'Dancing Script', cursive; 

  /* --- Text Sizes (Keep for now) --- */
  --text-base:  1rem; /* 16px */
  --text-sm:    0.875rem; /* 14px */
  --text-lg:    1.125rem; /* 18px */
  --text-xl:    1.5rem;   /* 24px */
  --text-2xl:   2rem;  /* 32px - Adjusted slightly */
  --text-3xl:   2.75rem;     /* 44px - Adjusted slightly */
}

/* Basic Styling */
html {
    width: 100%;
    overflow-x: hidden; /* Only prevent horizontal scrolling */
     font-size: 1.14rem; 
}

body {
    font-family: var(--font-body);
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    color: var(--dark-green-text); /* Use new dark green for text */
    background-color: var(--warm-beige-bg); /* Use new beige background */
    font-size: var(--text-base);
    line-height: 1.65; /* Slightly adjusted line-height */
    width: 100%;
    overflow-x: hidden; /* Only prevent horizontal scrolling */
}

*, *:before, *:after {
    box-sizing: border-box; /* Ensure all elements use border-box sizing */
}

main {
    /* Keep main padding here or move to sections.css? Keep here for overall spacing. */
    padding: var(--space-xl) 0; /* Remove side padding, handle in container */
    width: 100%;
    overflow-x: hidden; /* Additional protection against horizontal scrolling */
}

h2 {
    text-align: center;
    font-family: var(--font-heading);
    color: var(--dark-green-text);
    font-weight: 600;
    letter-spacing: 0.5px;
    margin-bottom: var(--space-xl);
}

h3 {
    font-family: var(--font-heading);
    color: var(--primary-green);
    font-weight: 600;
    font-size: var(--text-lg);
    margin-bottom: var(--space-sm);
}
/* Prevent child elements from trapping scroll; ensure scroll bubbles to body */
* {
  overscroll-behavior: auto !important;
}