/* ============================================================
   Nina & Collins — Mariage
   Foundation tokens: color + type
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500&family=Italiana&family=Cormorant+Infant:ital,wght@0,400;0,500;1,400&family=Parisienne&family=Inter:wght@300;400;500;600&display=swap');

:root {
  /* ─── Color · Paper (white-led) & ink ─── */
  --paper: #FFFFFF;          /* primary background — pure white */
  --paper-2: #FAF8F3;        /* warm off-white wash */
  --paper-3: #F2EFE6;        /* soft sand for cards / dividers */
  --ivory: #FFFDF7;          /* warmest white */
  --linen: #E8E2D2;          /* envelope-paper tone */

  --ink: #2A3528;            /* deep forest-green ink — primary text */
  --ink-2: #3F4D3B;          /* secondary text */
  --ink-3: #6B7867;          /* tertiary, muted */
  --ink-soft: #9CA598;       /* placeholder, hints */

  /* ─── Color · Brand accents ─── */
  --sage: #9CAF88;           /* PRIMARY brand sage */
  --sage-2: #B6C5A4;         /* lighter sage for backgrounds */
  --sage-3: #7B9069;         /* deeper sage for hover / depth */
  --sage-soft: #DDE5D2;      /* whisper sage */

  --noir: #1F2A1D;           /* deep forest, tuxedo equivalent */
  --or: #C9A35A;             /* gold — primary accent (was --or) */
  --or-2: #DDB97A;           /* light gold for highlights */
  --or-3: #A8853F;           /* deep antique gold */

  --rose: #C9837A;           /* sparing, optional */
  --rose-soft: #E8C9C0;      /* sparing, optional */
  --bordeaux: #6B2330;       /* sparing, optional */
  --vert: var(--sage-3);     /* alias to sage-3 */
  --vert-soft: var(--sage);  /* alias to sage */

  /* ─── Color · Semantic ─── */
  --bg: var(--paper);
  --surface: var(--ivory);
  --surface-2: var(--paper-2);
  --border: rgba(27, 36, 64, 0.14);
  --border-strong: rgba(27, 36, 64, 0.30);
  --rule: rgba(201, 163, 90, 0.55);   /* gold hairline */

  --fg: var(--ink);
  --fg-muted: var(--ink-3);
  --fg-soft: var(--ink-soft);
  --accent: var(--or);
  --accent-deep: var(--or-3);

  /* ─── Type · Families ─── */
  --font-display: 'Italiana', 'Cormorant Garamond', Georgia, serif;       /* tall, elegant headers */
  --font-serif: 'Cormorant Garamond', 'Cormorant Infant', Georgia, serif; /* body serif */
  --font-script: 'Parisienne', 'Snell Roundhand', cursive;                /* names, monogram */
  --font-sans: 'Inter', -apple-system, system-ui, sans-serif;             /* labels, UI */

  /* ─── Type · Scale (a fluid editorial scale) ─── */
  --t-xs: 11px;
  --t-sm: 13px;
  --t-base: 16px;
  --t-md: 18px;
  --t-lg: 22px;
  --t-xl: 28px;
  --t-2xl: 36px;
  --t-3xl: 48px;
  --t-4xl: 64px;
  --t-5xl: 88px;
  --t-6xl: 120px;

  /* ─── Spacing ─── */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;
  --s-10: 128px;

  /* ─── Radii ─── */
  --r-none: 0;
  --r-sm: 2px;
  --r-md: 4px;
  --r-lg: 8px;
  --r-pill: 999px;

  /* ─── Shadow / elevation (very restrained — paper-on-paper) ─── */
  --shadow-1: 0 1px 2px rgba(27, 36, 64, 0.06);
  --shadow-2: 0 8px 24px rgba(27, 36, 64, 0.08), 0 1px 2px rgba(27, 36, 64, 0.04);
  --shadow-3: 0 24px 60px rgba(27, 36, 64, 0.14), 0 2px 6px rgba(27, 36, 64, 0.06);

  /* ─── Motion ─── */
  --ease-soft: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 180ms;
  --dur-base: 320ms;
  --dur-slow: 600ms;
}

/* ─── Semantic text styles ─── */

.h-display,
.h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(56px, 8vw, var(--t-6xl));
  line-height: 0.95;
  letter-spacing: 0.02em;
  color: var(--ink);
  text-wrap: balance;
}

.h2 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(36px, 5vw, var(--t-3xl));
  line-height: 1.05;
  letter-spacing: 0.005em;
  color: var(--ink);
}

.h3 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: var(--t-xl);
  line-height: 1.2;
  letter-spacing: 0.01em;
  color: var(--ink);
}

.h-script {
  font-family: var(--font-script);
  font-weight: 400;
  font-size: clamp(48px, 7vw, var(--t-5xl));
  line-height: 1;
  color: var(--or-3);
}

.eyebrow {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--t-xs);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--or-3);
}

.lede {
  font-family: var(--font-serif);
  font-weight: 300;
  font-style: italic;
  font-size: var(--t-lg);
  line-height: 1.55;
  color: var(--ink-2);
  text-wrap: pretty;
}

.body,
p {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--t-md);
  line-height: 1.65;
  color: var(--ink);
  text-wrap: pretty;
}

.label {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--t-sm);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-2);
}

.caption {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--t-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* ─── Decorative ornaments ─── */
.rule-gold {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--or);
}
.rule-gold::before,
.rule-gold::after {
  content: "";
  display: block;
  width: 56px;
  height: 1px;
  background: currentColor;
  opacity: 0.7;
}