/* ---------------------------------------------------------------------------
   invitacion / shared foundation
   Reset + design tokens sampled directly from "INVITACION F&A .pdf".

   Every colour below was measured off a 150 dpi render of the original PDF,
   so the prototypes inherit the real palette rather than an approximation.
   --------------------------------------------------------------------------- */

/* ---- 1. Reset ------------------------------------------------------------ */

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body,
h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; }

ul[role="list"],
ol[role="list"] { list-style: none; margin: 0; padding: 0; }

img, picture, svg { display: block; max-width: 100%; }

button, input, select, textarea { font: inherit; color: inherit; }

a { color: inherit; }

/* ---- 2. Tokens ----------------------------------------------------------- */

:root {
  /* Paper -- measured mean of the watercolour sheet in the PDF */
  --paper:        #fbf9f6;
  --paper-warm:   #f8f3ef;
  --paper-deep:   #f2ede4;

  /* Ink -- the muted sage the Baskerville italic is set in (#567468) */
  --ink:          #567468;
  --ink-deep:     #3e4c33;   /* darkest foliage tone in the bouquet        */
  --ink-70:       rgba(86, 116, 104, 0.70);
  --ink-45:       rgba(86, 116, 104, 0.45);
  --ink-18:       rgba(86, 116, 104, 0.18);
  --ink-10:       rgba(86, 116, 104, 0.10);

  /* Sage -- the accent green of the headings (#76a873), extended into a ramp.
     500 is the exact PDF value: reserve it for large display type.
     600 clears 3:1 (AA large), 700 clears 4.5:1 (AA body + links).          */
  --sage-200:     #d0dccd;
  --sage-300:     #a2c29e;
  --sage-400:     #86b383;
  --sage-500:     #76a873;
  --sage-600:     #679963;
  --sage-700:     #4f7a4c;
  --sage-900:     #2f4a2d;

  /* Deep field, for the dark variant */
  --forest:       #23342a;
  --forest-deep:  #182620;
  --cream:        #f4f1e8;

  --rule:         var(--ink-18);

  /* Motion */
  --ease-out:     cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-soft:    cubic-bezier(0.33, 0, 0.12, 1);
  --dur-1:        220ms;
  --dur-2:        520ms;
  --dur-3:        900ms;

  /* Type families */
  --serif:        "Baskervville", "Baskerville", "Baskerville Old Face",
                  "Hoefler Text", Garamond, "Times New Roman", serif;
  --serif-alt:    "Cormorant Garamond", "Baskervville", Garamond,
                  "Times New Roman", serif;
  --sans:         "Jost", "Gill Sans", "Gill Sans MT", "Futura",
                  "Avenir Next", "Helvetica Neue", sans-serif;
}

/* ---- 3. Base ------------------------------------------------------------- */

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-synthesis-weight: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Spanish copy is full of accents; keep them from being clipped. */
:where(h1, h2, h3) { line-height: 1.12; text-wrap: balance; }
:where(p) { text-wrap: pretty; }

/* ---- 4. Shared utilities -------------------------------------------------- */

.u-visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Paper grain, generated rather than downloaded. Sits above the background
   and below the type; pointer-events off so it never eats a tap. */
.u-grain::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.32;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}

/* ---- 5. Focus ------------------------------------------------------------- */

:focus-visible {
  outline: 2px solid var(--sage-700);
  outline-offset: 4px;
  border-radius: 2px;
}

/* ---- 6. Motion preference -------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  /* Anything that fades/slides in on load must still end up visible. */
  [data-reveal] { opacity: 1 !important; transform: none !important; }
}

/* ---- 7. Print -------------------------------------------------------------- */

@media print {
  :root { --paper: #fff; }
  .u-no-print { display: none !important; }
  body { background: #fff; }
}