/*
 * base.css — CSS variables, resets, base typography
 *
 * Font Pairing: Cormorant Garamond (display) + Jost (body)
 * ─────────────────────────────────────────────────────────
 * Cormorant Garamond brings old-world elegance and genuine romantic character,
 * well-suited to the classy-rustic aesthetic without feeling fussy or dated.
 * Jost is a clean geometric sans-serif that stays highly readable at small
 * mobile sizes and complements the display font without competing with it.
 *
 * → In NextJS: styles/globals.css + app/layout.tsx (next/font/google)
 */

/* ─── Custom Properties ──────────────────────────────────────────────────── */

:root {
  /* Colors */
  --color-sage:        #7D9B76;
  --color-sage-light:  #A8BFA3;
  --color-sage-dark:   #526B4E;
  --color-red:         #8B1A1A;
  --color-cream:       #F5F0E8;
  --color-warm-white:  #FAF8F4;
  --color-charcoal:    #2C2C2C;
  --color-muted:       #6B6B6B;

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

  /* Type scale */
  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;

  /* Spacing scale (rem, 16px root) */
  --space-1:  0.25rem;   /*  4px */
  --space-2:  0.5rem;    /*  8px */
  --space-3:  0.75rem;   /* 12px */
  --space-4:  1rem;      /* 16px */
  --space-5:  1.25rem;   /* 20px */
  --space-6:  1.5rem;    /* 24px */
  --space-8:  2rem;      /* 32px */
  --space-10: 2.5rem;    /* 40px */
  --space-12: 3rem;      /* 48px */
  --space-20: 5rem;      /* 80px */
  --space-24: 6rem;      /* 96px */

  /* Layout */
  --container-max: 860px;
  --nav-height:    68px;

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 400ms ease;

  /*
   * Linen texture — SVG fractal noise (feTurbulence) as a repeating data URI.
   * Applied as background-image, layered over background-color on each section.
   * stitchTiles="stitch" ensures seamless tiling.
   */
  --texture-linen: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.07'/%3E%3C/svg%3E");
}

/* ─── Reset ──────────────────────────────────────────────────────────────── */

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

html {
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 400;
  line-height: 1.7;
  color: var(--color-charcoal);
  background-color: var(--color-cream);
  background-image: var(--texture-linen);
  overflow-x: hidden;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

ul {
  list-style: none;
}

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

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

/* ─── Base Typography ────────────────────────────────────────────────────── */

h1,
h2 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.15;
  color: var(--color-charcoal);
}

p {
  line-height: 1.7;
}

/* ─── Shared Utilities ───────────────────────────────────────────────────── */

/* → In NextJS: shared layout wrapper component */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--space-6);
}

/* Used as section heading in Details and FAQ */
.section-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 2.75rem);
  font-weight: 600;
  text-align: center;
  color: var(--color-charcoal);
  letter-spacing: 0.01em;
  margin-bottom: var(--space-10);
}

/*
 * Thin blood-red horizontal divider.
 * Used sparingly — appears once in Details and once in FAQ (2 total).
 */
.divider {
  width: 48px;
  height: 1px;
  background-color: var(--color-red);
  margin-inline: auto;
  margin-bottom: var(--space-6);
}