/* Tania & Juan — shared design tokens */
:root {
  --cream:       #EFE6DC;
  --cream-soft:  #F5EEE5;
  --cream-deep:  #E4D7C5;
  --paper:       #FBF6EF;
  --ink:         #2A2320;
  --ink-soft:    #5A4F48;
  --line:        #C9B9A8;
  --line-soft:   #D9CDBE;
  --rose:        #B14A43;
  --rose-deep:   #8F342E;
  --rose-wash:   #D89A93;
  --burgundy:    #6E2420;

  --f-display: "Playfair Display", "Cormorant Garamond", Georgia, serif;
  --f-sans:    "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  --f-script:  "Caveat", "Playfair Display", cursive;
  --f-mono:    "JetBrains Mono", ui-monospace, Menlo, monospace;

  --r-sm: 2px;
  --r-md: 6px;

  --ease-out: cubic-bezier(.22,.61,.36,1);
  --ease-in-out: cubic-bezier(.65,.05,.36,1);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--cream);
  color: var(--ink);
  font-family: var(--f-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }

::selection { background: var(--rose); color: var(--cream); }

/* Shared utilities */
.hair { height: 1px; background: var(--rose); opacity: .5; }
.hair-ink { height: 1px; background: var(--ink); opacity: .15; }

.btn-rsvp {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px;
  border: 1px solid var(--rose);
  background: var(--rose);
  color: var(--cream);
  font-family: var(--f-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  transition: all .3s var(--ease-out);
  white-space: nowrap;
}
.btn-rsvp:hover { background: var(--rose-deep); border-color: var(--rose-deep); color: var(--cream); }
.btn-rsvp.is-outline { background: transparent; color: var(--rose); }
.btn-rsvp.is-outline:hover { background: var(--rose); color: var(--cream); }
.btn-rsvp.is-invert { background: var(--cream); color: var(--rose); border-color: var(--cream); }
.btn-rsvp.is-invert:hover { background: var(--cream); color: var(--rose-deep); border-color: var(--cream); }

.eyebrow {
  font-family: var(--f-sans);
  font-size: 11px;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--rose);
  font-weight: 500;
}

/* Subtle grain overlay for depth */
.grain::before {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(rgba(42,35,32,.035) 1px, transparent 1px),
    radial-gradient(rgba(42,35,32,.02) 1px, transparent 1px);
  background-size: 3px 3px, 7px 7px;
  background-position: 0 0, 1px 2px;
  mix-blend-mode: multiply;
  z-index: 2;
}