/* ============================================================================
   WEDWEBS DESIGN SYSTEM — TOKENS
   Single source of truth for wedwebs.com marketing site
   ============================================================================ */

@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/fonts/Fraunces-VariableFont_SOFT_WONK_opsz_wght.ttf") format("truetype");
}
@font-face {
  font-family: "Fraunces";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("/fonts/Fraunces-Italic-VariableFont_SOFT_WONK_opsz_wght.ttf") format("truetype");
}
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");

:root {
  /* Backgrounds */
  --ww-bg:              #fbf7f1;
  --ww-bg-warm:         #f5efe5;
  --ww-bg-deep:         #ede2d1;
  --ww-cream-card:      #ffffff;
  --ww-cream-card-soft: #faf5ec;

  /* Ink */
  --ww-ink:             #241608;
  --ww-ink-soft:        #584535;
  --ww-ink-muted:       #8c7a66;

  /* Brown */
  --ww-brown:           #7a5a3a;
  --ww-brown-dark:      #4a331f;
  --ww-brown-deep:      #2e1d0e;

  /* Gold */
  --ww-gold:            #c9a45a;
  --ww-gold-soft:       #e6d3a5;
  --ww-gold-bright:     #d4b170;
  --ww-gold-bronze:     #b88e44;

  /* Lines */
  --ww-line:            rgba(74, 51, 31, 0.12);
  --ww-line-soft:       rgba(74, 51, 31, 0.06);

  /* Gradients */
  --ww-featured-bg:     linear-gradient(175deg, #2e1d0e 0%, #4a331f 100%);
  --ww-gold-grad:       linear-gradient(135deg, #d4b170 0%, #b88e44 100%);

  /* Typography */
  --ww-serif: "Fraunces", "Cormorant Garamond", Georgia, serif;
  --ww-sans:  "Inter", -apple-system, BlinkMacSystemFont, sans-serif;

  /* Font sizes */
  --ww-fs-display: clamp(44px, 7vw, 84px);
  --ww-fs-h1:      clamp(34px, 5vw, 56px);
  --ww-fs-h2:      44px;
  --ww-fs-h3:      28px;
  --ww-fs-h4:      22px;
  --ww-fs-lead:    19px;
  --ww-fs-body:    16px;
  --ww-fs-sm:      14px;
  --ww-fs-xs:      13px;
  --ww-fs-eyebrow: 11px;

  /* Line heights */
  --ww-lh-display: 1;
  --ww-lh-heading: 1.08;
  --ww-lh-body:    1.65;
  --ww-lh-tight:   1.35;

  /* Tracking */
  --ww-track-display: -0.035em;
  --ww-track-heading: -0.025em;
  --ww-track-eyebrow: 0.24em;

  /* Weights */
  --ww-w-light:   300;
  --ww-w-regular: 400;
  --ww-w-medium:  500;
  --ww-w-semi:    600;
  --ww-w-bold:    700;

  /* Spacing (4px base) */
  --s-1:  4px;   --s-2:  8px;   --s-3:  12px;  --s-4:  16px;
  --s-5:  20px;  --s-6:  24px;  --s-8:  32px;  --s-10: 40px;
  --s-12: 48px;  --s-14: 56px;  --s-16: 64px;  --s-20: 80px;
  --s-24: 96px;  --s-32: 128px;

  --section-y:    96px;
  --section-y-sm: 64px;
  --max-w:        1180px;
  --max-w-text:   680px;

  /* Radii */
  --r-sm:   12px;
  --r-md:   20px;
  --r-lg:   28px;
  --r-pill: 999px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(46,29,14,.04), 0 2px 8px rgba(46,29,14,.04);
  --shadow-md: 0 2px 6px rgba(46,29,14,.06), 0 20px 40px -12px rgba(46,29,14,.10);
  --shadow-lg: 0 4px 10px rgba(46,29,14,.08), 0 40px 70px -20px rgba(46,29,14,.16);
  --shadow-gold: 0 10px 30px -10px rgba(184,142,68,.5);

  /* Motion */
  --ease:     cubic-bezier(0.2, 0.8, 0.2, 1);
  --dur-fast: 180ms;
  --dur:      300ms;
  --dur-slow: 700ms;
}

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

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--ww-sans);
  background: var(--ww-bg);
  color: var(--ww-ink);
  font-size: var(--ww-fs-body);
  line-height: var(--ww-lh-body);
}

img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }

/* ── Layout helpers ──────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: clamp(20px, 5vw, 60px);
}

.section {
  padding-block: var(--section-y);
}

@media (max-width: 768px) {
  .section { padding-block: var(--section-y-sm); }
}

/* ── Eyebrow ─────────────────────────────────────────────────── */
.eyebrow {
  font-family: var(--ww-sans);
  font-size: var(--ww-fs-eyebrow);
  font-weight: var(--ww-w-medium);
  letter-spacing: var(--ww-track-eyebrow);
  text-transform: uppercase;
  color: var(--ww-brown);
}

/* ── Buttons ─────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 15px 28px;
  border-radius: var(--r-pill);
  font-family: var(--ww-sans);
  font-size: var(--ww-fs-sm);
  font-weight: var(--ww-w-semi);
  border: 1.5px solid transparent;
  line-height: 1.2;
  transition: all var(--dur) var(--ease);
  white-space: nowrap;
}

.btn-primary {
  background: var(--ww-brown-deep);
  color: #fff;
}
.btn-primary:hover {
  background: var(--ww-brown-dark);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.btn-gold {
  background: var(--ww-gold-grad);
  color: var(--ww-brown-deep);
  box-shadow: var(--shadow-gold);
}
.btn-gold:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 40px -10px rgba(184,142,68,.6);
}

.btn-outline {
  background: transparent;
  color: var(--ww-brown-deep);
  border-color: var(--ww-line);
}
.btn-outline:hover {
  border-color: var(--ww-brown);
  background: var(--ww-bg-warm);
}

.btn-ghost {
  background: transparent;
  color: var(--ww-ink-soft);
  border-color: transparent;
}
.btn-ghost:hover { color: var(--ww-brown); }

/* ── Arrow icon helper ───────────────────────────────────────── */
.arrow {
  width: 14px; height: 14px;
  flex-shrink: 0;
  transition: transform var(--dur) var(--ease);
}
.btn:hover .arrow { transform: translateX(3px); }