/* ============================================================
   Design tokens
   ------------------------------------------------------------
   The couple's palette. Change a source color and the
   invitation retints. Paper and the card inside the envelope
   share --paper so the handoff matches.

     Pearl ivory      #F8F3E9
     Warm champagne   #E8D5B5
     Antique gold     #C6A46B
     Deep burgundy    #72283D
     Dusty rose       #B88A91
     Soft taupe       #A7978A
   ============================================================ */

:root {
  /* —— Source colors —— */
  --ivory:     #F8F3E9;
  --champagne: #E8D5B5;
  --gold:      #C6A46B;
  --burgundy:  #72283D;
  --rose:      #B88A91;
  --taupe:     #A7978A;

  --ink:   #3a1c26;
  --paper: var(--ivory);
  --metal: var(--gold);
  --night: #1b0e14;

  /* —— Shades —— */
  --ink-soft:     #76665c;
  --paper-raised: #fdfaf4;
  --line:         #ebdfcb;

  --blush: var(--rose);

  --metal-deep: #8a6c3b;
  --metal-hi:   #e6cd99;

  --night-lift: #2e1520;

  --envelope:       var(--burgundy);
  --envelope-light: #8d3a53;
  --envelope-deep:  #5a1f30;
  --liner:          var(--ivory);
  --liner-deep:     var(--gold);

  --seal:      var(--gold);
  --seal-hi:   var(--metal-hi);
  --seal-deep: var(--metal-deep);
  --seal-ink:  #5a4323;

  --danger: #8a3b2e;

  /* —— Curves —— */
  --radius-xs: 4px;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 28px;
  --radius-pill: 999px;
  --arch: 46%;          /* hero frame: higher = rounder dome */
  --ring: 1px;          /* hairline thickness */
  --frame-gap: 9px;     /* gap between the menu's two frames */
  --env-radius: 7px;
  --env-width: min(86vw, 420px);
  --env-ratio: 1.46;
  --seal-size: 78px;

  /* —— Space —— */
  --space-2xs: 4px;
  --space-xs: 8px;
  --space-sm: 14px;
  --space-md: 20px;
  --space-lg: 32px;
  --space-xl: 52px;
  --space-2xl: 72px;
  --page-max: 560px;
  --page-pad: 22px;
  --measure: 40ch;

  /* —— Type —— */
  --font-script: "Pinyon Script", "Snell Roundhand", cursive;
  --font-serif: "Cormorant Garamond", Garamond, "Palatino Linotype", Palatino, serif;
  --font-ui: "Jost", "Avenir Next", "Helvetica Neue", sans-serif;
  --text-body: 18px;
  --text-display: clamp(58px, 17vw, 96px);
  --text-section: clamp(34px, 9vw, 44px);
  --leading: 1.55;
  --track: 0.28em;
  --track-tight: 0.16em;

  /* —— Motion —— */
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --dur: 0.45s;
  --dur-slow: 0.9s;

  /* —— Shadow —— */
  --shadow-soft: 0 22px 40px -28px color-mix(in srgb, var(--ink) 70%, transparent);
  --shadow-stage: 0 34px 60px -18px rgb(0 0 0 / 0.72);
  --shadow-seal:
    0 8px 16px rgb(0 0 0 / 0.4),
    inset 0 -4px 7px rgb(0 0 0 / 0.28),
    inset 0 2px 3px rgb(255 255 255 / 0.35);

  color-scheme: light;
}

@media (max-width: 420px) {
  :root { --text-body: 17px; --page-pad: 18px; }
}

/* —— Base —— */
*, *::before, *::after { box-sizing: border-box; }
html { height: 100%; }
body {
  margin: 0;
  min-height: 100%;
  background: var(--night);
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: var(--text-body);
  line-height: var(--leading);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
button, input, select, textarea { font: inherit; color: inherit; }
img, svg { max-width: 100%; }
:focus-visible {
  outline: 2px solid var(--metal-deep);
  outline-offset: 3px;
}
::selection { background: var(--blush); color: var(--ink); }
[hidden] { display: none !important; }
.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}