/* ============================================================
   Sacha & Daniëlle — Save the Date
   Foundational tokens (color + type)
   Sourced from public/style.css in SachaVeldhoen/savethedate
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Montaga&family=Jost:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600&family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap");

:root {
  /* ---------- Brand palette ---------- */
  --color-bg:                #fff8ec; /* page background — warm cream */
  --color-bg-tint:           #f8efe2; /* footer & FAQ surfaces      */
  --color-bg-grey:           #f1e5d3; /* hero bottom band, sub-surfaces */
  --color-card:              #fffcf6; /* form fields                */

  --color-fg:                #643b14; /* primary text & headings    */
  --color-fg-soft:           #825326; /* body / paragraph text      */
  --color-fg-mute:           #7a7a7a; /* tertiary, captions         */

  --color-action:            #825326; /* button / link fill         */
  --color-action-hover:      #643b14; /* button hover fill          */
  --color-action-pressed:    #0a0a0a; /* link hover / pressed       */

  --color-line:              #d3d3d3; /* hairline dividers (mid)    */
  --color-line-soft:         #6f6c67; /* secondary button border    */

  --color-danger:            #ca4949;
  --color-danger-bg:         #f8e2e2;

  --color-white:             #ffffff;
  --color-black:             #000000;

  /* ---------- Type families ---------- */
  --font-display: "Montaga", "Playfair Display", "Cormorant Garamond", Georgia, serif;
  --font-sans:    "Jost", "Inter", system-ui, -apple-system, sans-serif;
  --font-fancy:   "Playfair Display", "Cormorant Garamond", Georgia, serif;

  /* ---------- Type scale ---------- */
  /* Body uses Montaga (serif), Jost is reserved for paragraphs / utility */
  --fs-display:    6rem;    /* 96px — hero name / display heading */
  --fs-h1:         5.6rem;  /* 89.6px — typewriter "Beste …"      */
  --fs-h2:         5.5rem;  /* 88px — section titles ("Dagplanning") */
  --fs-h2-mid:     4rem;    /* 64px — heading-h2 utility          */
  --fs-h3:         3rem;    /* 48px — heading-h3                  */
  --fs-h4:         1.5rem;  /* 24px — heading-h4                  */
  --fs-h5:         1.2rem;  /* 19.2px                              */
  --fs-h6:         1rem;    /* 16px                                */
  --fs-quote:      3.75rem; /* 60px — our-story-quote-heading     */

  --fs-32:         2rem;
  --fs-28:         1.75rem; /* paragraph-32 (intro copy)          */
  --fs-20:         1.25rem; /* paragraph-20 (schedule times)      */
  --fs-18:         1.125rem;/* paragraph-18 (FAQ body)            */
  --fs-16:         1rem;    /* paragraph-16 (body)                */
  --fs-14:         0.875rem;
  --fs-12:         0.75rem;

  --lh-tight:      1.05;    /* h1 / h2                            */
  --lh-snug:       1.2;
  --lh-body:       1.5;
  --lh-loose:      1.7;

  /* ---------- Spacing scale (rem) ---------- */
  --sp-1: .25rem;  /*  4 */
  --sp-2: .5rem;   /*  8 */
  --sp-3: .75rem;  /* 12 */
  --sp-4: 1rem;    /* 16 */
  --sp-6: 1.5rem;  /* 24 */
  --sp-8: 2rem;    /* 32 */
  --sp-12: 3rem;   /* 48 */
  --sp-16: 4rem;   /* 64 */
  --sp-24: 6rem;   /* 96 */
  --sp-32: 8rem;   /* 128 — rsvp grid gap */

  /* ---------- Radii ---------- */
  --radius-input:   8px;    /* text fields                        */
  --radius-card:    1rem;   /* FAQ accordion                      */
  --radius-card-lg: 1.5rem; /* nav dropdown card                  */
  --radius-pill:    4rem;   /* secondary button                   */
  --radius-arch-md: 600px;  /* schedule-image archway             */
  --radius-arch-lg: 800px;  /* image-outline archway              */
  --radius-arch-xl: 900px;  /* rsvp-image archway                 */

  /* ---------- Borders ---------- */
  --bw-hairline: 1px;
  --border-default: 1px solid var(--color-action);
  --border-soft:    1px solid var(--color-bg-grey);

  /* ---------- Motion ---------- */
  --ease-soft: cubic-bezier(.215, .61, .355, 1);
  --dur-fast:  150ms;
  --dur-base:  300ms;
  --dur-slow:  600ms;
}

/* ============================================================
   Element defaults — match the live wedding site
   ============================================================ */

html, body {
  background-color: var(--color-bg);
  color: var(--color-fg);
}

body {
  font-family: var(--font-display);
  font-size: var(--fs-16);
  line-height: 1;
  margin: 0;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-weight: 400;
  font-family: var(--font-display);
  color: var(--color-fg);
}

h1 { font-size: var(--fs-h1); line-height: 1.07em; }
h2 { font-size: var(--fs-h2); line-height: var(--lh-tight); }
h3 { font-size: 2.25rem;       line-height: 1.1em; }
h4 { font-size: var(--fs-h4);  line-height: var(--lh-snug); font-weight: 500; }
h5 { font-size: var(--fs-h5);  line-height: var(--lh-snug); font-weight: 500; }
h6 { font-size: var(--fs-h6);  line-height: var(--lh-snug); font-weight: 400; }

p, .paragraph-16 {
  font-family: var(--font-sans);
  font-size: var(--fs-16);
  color: var(--color-fg-soft);
  line-height: var(--lh-body);
  margin: 0;
}

.paragraph-18 { font-family: var(--font-sans); font-size: var(--fs-18); color: var(--color-fg-soft); line-height: 1.5em; }
.paragraph-20 { font-family: var(--font-sans); font-size: var(--fs-20); color: var(--color-fg);      line-height: 1.4em; }
.paragraph-28 { font-family: var(--font-sans); font-size: var(--fs-28); color: var(--color-fg-soft); line-height: 1.3em; }
.paragraph-14 { font-family: var(--font-sans); font-size: var(--fs-14); color: var(--color-fg-soft); line-height: 1.4em; }

.title-inv {
  color: var(--color-bg);
  font-size: 21px;
}

.label {
  font-family: var(--font-sans);
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: var(--fs-12);
  color: var(--color-fg-soft);
}

a { color: var(--color-action); text-decoration: none; transition: color var(--dur-base); }
a:hover { color: var(--color-action-pressed); }