/* =========================================================
   BASE STYLES
   Design tokens, resets, typography, and global helpers.
   These are the foundation every other stylesheet builds on.
   ========================================================= */

/* ---------- Design Tokens ----------
   All colors, type, spacing, and motion live here so the
   whole site can be retuned by editing this single block. */
:root {
  /* Brand colors pulled directly from the logo SVG */
  --sage: #8fa87d;          /* primary brand green from logo background */
  --sage-dark: #6e8862;     /* hover/pressed state for sage */
  --sage-soft: #c8d4bc;     /* tints for backgrounds */
  --sage-tint: #eef2e8;     /* very faint wash */
  --forest: #1f2a23;        /* deep green used for body text */
  --forest-light: #3a4d40;  /* secondary text */
  --platinum: #e8e8e8;      /* metallic accent from logo */
  --gold: #b89968;          /* premium accent color */
  --cream: #faf7f0;         /* off-white page background */
  --white: #ffffff;
  --gray-100: #f5f4ef;
  --gray-300: #d8d5cc;
  --gray-500: #8a877f;

  /* Typography stacks — Crimson Text mirrors the logo serif */
  --font-serif: 'Crimson Text', Georgia, 'Times New Roman', serif;
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;

  /* Fluid type scale uses clamp() so headlines scale smoothly
     between mobile and desktop without hard breakpoints */
  --text-hero: clamp(2.4rem, 5.5vw, 4.6rem);
  --text-h2: clamp(2rem, 3.6vw, 3rem);
  --text-h3: clamp(1.4rem, 2vw, 1.75rem);
  --text-body: 1.0625rem;
  --text-small: 0.9rem;

  /* Spacing scale — used for padding, gap, margin */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 3rem;
  --space-6: 4rem;
  --space-7: 6rem;

  /* Borders, radii, shadows — soft and refined */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-pill: 999px;
  --shadow-sm: 0 2px 8px rgba(31, 42, 35, 0.04);
  --shadow-md: 0 8px 28px rgba(31, 42, 35, 0.08);
  --shadow-lg: 0 24px 60px rgba(31, 42, 35, 0.12);

  /* Motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --transition: 0.4s var(--ease);

  /* Container width — caps content on large monitors */
  --container: 1200px;
}

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

html {
  scroll-behavior: smooth;
  /* Slightly larger root for better mobile readability */
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: 1.65;
  color: var(--forest);
  background: var(--cream);
  /* Prevent horizontal scroll caused by absolute decorative elements */
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; height: auto; }

a { color: inherit; text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--sage-dark); }

button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }

/* ---------- Typography ----------
   Headings use the serif for elegance. Body stays sans for clarity. */
h1, h2, h3, h4 {
  font-family: var(--font-serif);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--forest);
}

h1 { font-size: var(--text-hero); font-weight: 400; line-height: 1.05; }
h2 { font-size: var(--text-h2); font-weight: 400; }
h3 { font-size: var(--text-h3); font-weight: 600; }
h4 { font-size: 1.1rem; font-weight: 600; font-family: var(--font-sans); }

p { margin-bottom: 0; }

/* Reusable accent — colored underline behind a phrase */
.text-accent {
  color: var(--sage-dark);
  font-style: italic;
  position: relative;
  white-space: nowrap;
}

/* ---------- Eyebrow label ----------
   Small uppercase label used above section headings. */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sage-dark);
  margin-bottom: var(--space-2);
}
.eyebrow--center { justify-content: center; }
.eyebrow__dot {
  width: 8px; height: 8px;
  background: var(--sage);
  border-radius: 50%;
  /* Soft pulsing dot — see animations.css for keyframes */
  animation: pulse 2.4s ease-in-out infinite;
}

/* ---------- Utility helpers ---------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--space-3);
}

/* Section heading wrapper centers eyebrow + title + sub */
.section__head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto var(--space-6);
}
.section__sub {
  margin-top: var(--space-2);
  color: var(--forest-light);
  font-size: 1.1rem;
}

/* Reduce motion respect — 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;
  }
}