/* ============================================
   LOVE LETTER DESIGN SYSTEM — Colors & Type
   Wedding invitation website · pastel pink + cream
   ============================================ */

/* ---- FONTS ----
   Love Letter uses FOUR licensed display/script faces for romantic moments,
   paired with Quicksand + Nunito for UI/body (rounded, bubbly, legible).
   - Adenville    → primary display-script (couple names, hero)
   - Signatie     → handwritten pen script (wishes, signatures)
   - Yessy        → decorative script with heart flourishes (accent only)
   - Madelican    → alternate elegant script (secondary display)
*/
@font-face { font-family: 'Adenville';  src: url('./fonts/Adenville.otf')  format('opentype'); font-display: swap; }
@font-face { font-family: 'Signatie';   src: url('./fonts/Signatie.otf')   format('opentype'); font-display: swap; }
@font-face { font-family: 'Yessy';      src: url('./fonts/Yessy.otf')      format('opentype'); font-display: swap; }
@font-face { font-family: 'Madelican';  src: url('./fonts/Madelican.ttf')  format('truetype'); font-display: swap; }
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&family=Nunito:wght@300;400;600;700;800&family=Fraunces:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400&display=swap');

:root {
  /* ---------- COLOR PALETTE ---------- */

  /* Primary pink — pastel, soft, vintage */
  --pink-50:  #FFF5F7;   /* near-white blush */
  --pink-100: #FFE8EE;   /* baby blush background */
  --pink-200: #FFD3DE;   /* soft rose */
  --pink-300: #FFB4C6;   /* petal pink — primary */
  --pink-400: #F890AA;   /* rose */
  --pink-500: #E56A8A;   /* deeper rose — CTAs */
  --pink-600: #C94C71;   /* wine rose — hover */
  --pink-700: #9E3755;   /* deep rose — text accent */

  /* Cream / ivory — paper & background */
  --cream-50:  #FFFBF4;  /* warm paper */
  --cream-100: #FDF6E9;  /* body bg */
  --cream-200: #F7EBD3;  /* muted cream */
  --cream-300: #EED8B0;  /* aged paper / tan */

  /* Accents — for confetti, sparkle, ribbon */
  --gold-300:  #EBC981;
  --gold-400:  #D8A84E;  /* ring gold */
  --gold-500:  #B8862F;  /* deep gold */

  --sage-300:  #BFD3B5;  /* leaf accent */
  --sage-500:  #88A57D;

  --lilac-300: #D7C4E8;  /* secondary flower */
  --peach-300: #FFD4B8;  /* warm sunset accent */

  /* Neutral warm grays (never cool — stay in the vintage family) */
  --ink-900: #3A2A33;    /* primary text — warm dark plum */
  --ink-700: #5E4952;    /* secondary text */
  --ink-500: #8E7681;    /* tertiary / captions */
  --ink-300: #C9B8BF;    /* borders, subtle */
  --ink-100: #EEE4E7;    /* hairlines */

  /* Semantic */
  --fg-1: var(--ink-900);           /* primary text */
  --fg-2: var(--ink-700);           /* secondary text */
  --fg-3: var(--ink-500);           /* tertiary / captions */
  --fg-inverse: var(--cream-50);    /* on-pink text */
  --fg-accent: var(--pink-700);     /* romantic highlights */

  --bg-page:    var(--cream-100);   /* main canvas */
  --bg-paper:   var(--cream-50);    /* card surfaces */
  --bg-blush:   var(--pink-100);    /* soft section bg */
  --bg-rose:    var(--pink-300);    /* accent section bg */
  --bg-deep:    var(--pink-500);    /* CTAs, footers */

  --border-soft: var(--ink-100);
  --border-rose: var(--pink-200);
  --border-gold: var(--gold-400);

  /* ---------- TYPOGRAPHY ---------- */

  /* Font families */
  --font-display-script: 'Adenville', 'Dancing Script', cursive;   /* primary display — couple names, hero */
  --font-script:         'Signatie', 'Caveat', cursive;            /* handwritten wishes, signatures */
  --font-accent-script:  'Yessy', 'Dancing Script', cursive;       /* decorative accent with heart flourishes */
  --font-alt-script:     'Madelican', 'Dancing Script', cursive;   /* alternate elegant script */
  --font-display:        'Fraunces', Georgia, serif;               /* modern serif fallback for italic moments */
  --font-ui:             'Quicksand', 'Nunito', ui-rounded, system-ui, sans-serif;  /* UI, buttons, labels */
  --font-body:           'Nunito', 'Quicksand', ui-rounded, system-ui, sans-serif;  /* long-form text */

  /* Type scale — generous, wedding-invitation generous */
  --fs-xs:   12px;
  --fs-sm:   14px;
  --fs-base: 16px;
  --fs-md:   18px;
  --fs-lg:   22px;
  --fs-xl:   28px;
  --fs-2xl:  36px;
  --fs-3xl:  48px;
  --fs-4xl:  64px;
  --fs-5xl:  88px;
  --fs-hero: 120px;

  /* Line heights */
  --lh-tight:  1.1;
  --lh-snug:   1.25;
  --lh-normal: 1.5;
  --lh-loose:  1.75;

  /* Letter spacing — very tight for display, wide for small caps labels */
  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.08em;
  --tracking-widest: 0.2em;

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

  /* ---------- RADII ---------- */
  --r-sm:   8px;
  --r-md:   14px;
  --r-lg:   20px;
  --r-xl:   32px;
  --r-2xl:  48px;
  --r-pill: 999px;
  --r-blob: 58% 42% 63% 37% / 45% 55% 45% 55%;  /* organic petal shape */

  /* ---------- SHADOWS ---------- */
  /* Pink-tinted, soft — never harsh black */
  --shadow-xs:  0 1px 2px rgba(158, 55, 85, 0.06);
  --shadow-sm:  0 2px 6px rgba(158, 55, 85, 0.08), 0 1px 2px rgba(158, 55, 85, 0.04);
  --shadow-md:  0 8px 20px rgba(158, 55, 85, 0.10), 0 2px 6px rgba(158, 55, 85, 0.06);
  --shadow-lg:  0 20px 40px rgba(158, 55, 85, 0.14), 0 6px 12px rgba(158, 55, 85, 0.08);
  --shadow-xl:  0 30px 60px rgba(158, 55, 85, 0.18), 0 10px 20px rgba(158, 55, 85, 0.10);
  --shadow-polaroid: 0 4px 12px rgba(58, 42, 51, 0.15), 0 16px 32px rgba(58, 42, 51, 0.12);
  --shadow-inset-soft: inset 0 2px 4px rgba(158, 55, 85, 0.06);
  --shadow-glow-pink: 0 0 0 4px rgba(232, 106, 138, 0.2);
  --shadow-glow-gold: 0 0 0 4px rgba(216, 168, 78, 0.3);
}

/* ---------- BASE ELEMENTS ---------- */
body {
  background: var(--bg-page);
  color: var(--fg-1);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, .h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-4xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}

h2, .h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-3xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}

h3, .h3 {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: var(--fs-2xl);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}

h4, .h4 {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}

/* Display — the romantic wedding-name moment */
.display-script {
  font-family: var(--font-display-script);
  font-weight: 400;
  font-size: var(--fs-hero);
  line-height: 0.95;
  color: var(--fg-accent);
}

.display-accent {
  font-family: var(--font-accent-script);
  font-weight: 400;
  font-size: var(--fs-4xl);
  line-height: var(--lh-tight);
  color: var(--fg-accent);
}

.display-alt {
  font-family: var(--font-alt-script);
  font-weight: 400;
  font-size: var(--fs-5xl);
  line-height: var(--lh-tight);
  color: var(--fg-accent);
}

.display-serif {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: var(--fs-5xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
}

/* Eyebrow / small caps label — "THE WEDDING OF" */
.eyebrow {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--fg-accent);
}

p {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-loose);
  color: var(--fg-2);
  text-wrap: pretty;
}

.lead {
  font-family: var(--font-body);
  font-size: var(--fs-md);
  line-height: var(--lh-loose);
  color: var(--fg-2);
}

.caption {
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  color: var(--fg-3);
}

.wish {
  font-family: var(--font-script);
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
  color: var(--fg-accent);
}

.signature {
  font-family: var(--font-script);
  font-size: var(--fs-2xl);
  color: var(--fg-accent);
}

code, .mono {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.9em;
}

/* ---------- UTILITY: vintage paper texture helper ---------- */
.paper-texture {
  background-color: var(--bg-paper);
  background-image:
    radial-gradient(rgba(238, 216, 176, 0.25) 1px, transparent 1px),
    radial-gradient(rgba(201, 184, 191, 0.12) 1px, transparent 1px);
  background-size: 20px 20px, 7px 7px;
  background-position: 0 0, 10px 10px;
}