/*
 * theme.css — Boda Mayra & Iván.
 * Fresco y minimal: blanco salvia, verde salvia profundo como acento,
 * tipografía Italiana (display) + Manrope (texto). Opens light.
 */

:root {
  --canvas: #f7f8f5;
  --surface: #ffffff;
  --surface-2: #ecf0e8;
  --border: #dce2d6;
  --border-strong: #a9b3a3;
  --ink: #1c221d;
  --muted: #56605a;
  --accent: #4f6b52;
  --accent-hover: #3f5842;
  --accent-ink: #ffffff;
  --accent-text: #46614a;
  --accent-strong: #2f4632;
  --accent-soft: #e1eadc;
  --accent-border: #bccdb4;
  --success: #3f7a4a;
  --success-ink: #ffffff;
  --success-soft: #e0eddf;
  --success-strong: #2d5e37;
  --warning: #a8652a;
  --warning-ink: #ffffff;
  --warning-soft: #f3e7da;
  --warning-strong: #8a4f1c;
  --danger: #b03a32;
  --danger-ink: #ffffff;
  --danger-soft: #f5e1de;
  --danger-strong: #9a2f28;
  --chart-1: #4f6b52;
  --chart-2: #c98f72;
  --chart-3: #8b9fb3;
  --chart-4: #b9a37f;
  --chart-5: #7d8c7f;
  --chart-6: #a06a7a;

  --font-display: "Italiana", "Cormorant Garamond", Georgia, serif;
  --font-body: "Manrope", ui-sans-serif, system-ui, sans-serif;
  --font-sans: "Manrope", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "DM Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --display-weight: 400;
  --display-tracking: 0.01em;
  --eyebrow-tracking: 0.32em;

  --radius-btn: 999px;
  --radius-card: 4px;
  --radius-input: 2px;
  --border-w: 1px;
  --shadow-card: none;
  --shadow-btn: none;
  --card-pad: 2rem;
  --caps: uppercase;
  --caps-tracking: 0.16em;
  --btn-weight: 600;
  --measure: 60ch;

  --x-on-photo: #ffffff;
  --x-band: #1f2a21;
  --x-band-ink: #f1f4ef;
  --x-band-muted: #b9c4b8;
  --x-band-line: #3a4a3c;
  --x-swatch-1: #9db49a;
  --x-swatch-2: #e6d8c3;
  --x-swatch-3: #c98f72;
  --x-swatch-4: #a8b8c8;
}

html[data-theme="dark"] {
  --canvas: #121613;
  --surface: #1a1f1b;
  --surface-2: #212822;
  --border: #2e372f;
  --border-strong: #4a564b;
  --ink: #eef1ec;
  --muted: #a3ada3;
  --accent: #a8c3a2;
  --accent-hover: #bdd3b7;
  --accent-ink: #132015;
  --accent-text: #b5ceaf;
  --accent-strong: #c9dcc4;
  --accent-soft: #243126;
  --accent-border: #3d5040;
  --success: #6fae7a;
  --success-ink: #0f1a11;
  --success-soft: #1c2c1f;
  --success-strong: #9fd1a8;
  --warning: #d89a5e;
  --warning-ink: #1a1007;
  --warning-soft: #33251a;
  --warning-strong: #e8b88a;
  --danger: #e07a70;
  --danger-ink: #1c0b09;
  --danger-soft: #3a1d1a;
  --danger-strong: #f0a59d;
  --chart-1: #a8c3a2;
  --chart-2: #e0a98d;
  --chart-3: #a9bdd1;
  --chart-4: #d4c09c;
  --chart-5: #9fae9f;
  --chart-6: #c995a4;

  --x-on-photo: #ffffff;
  --x-band: #0b0e0c;
  --x-band-ink: #eef1ec;
  --x-band-muted: #a3ada3;
  --x-band-line: #2a332b;
  --x-swatch-1: #9db49a;
  --x-swatch-2: #e6d8c3;
  --x-swatch-3: #c98f72;
  --x-swatch-4: #a8b8c8;
}

/* app.css — lo que es propio de esta invitación: la portada, la banda oscura, la paleta, el mapa. */

html { scroll-behavior: smooth; }
h1, h2, h3, .font-display { font-family: var(--font-display); font-weight: var(--display-weight); }

/* ---- Barra sobre la foto ---- */
.site-bar { color: var(--x-on-photo); }
.site-bar nav a { opacity: 0.85; transition: opacity 150ms; }
.site-bar nav a:hover { opacity: 1; text-decoration: none; }
.monogram { letter-spacing: 0.08em; }
.on-photo-btn { background: var(--x-on-photo); border-color: var(--x-on-photo); color: var(--x-band); }
.on-photo-btn:hover { background: transparent; border-color: var(--x-on-photo); color: var(--x-on-photo); }
.on-photo-icon, .on-photo-icon:hover { color: var(--x-on-photo); }
.on-photo-icon:hover { background: rgba(255, 255, 255, 0.14); }

/* ---- Portada ---- */
.hero { color: var(--x-on-photo); }
.hero-wash {
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0) 28%),
    linear-gradient(0deg, rgba(0, 0, 0, 0.62) 0%, rgba(0, 0, 0, 0.12) 55%, rgba(0, 0, 0, 0) 75%);
}
.hero .eyebrow { letter-spacing: var(--eyebrow-tracking); }
.hero-rule { background: var(--x-on-photo); opacity: 0.6; }
.hero-names .amp { font-style: italic; opacity: 0.8; }

/* El único momento que se mueve: los nombres suben al abrir la invitación. */
@keyframes names-rise {
  from { transform: translateY(28px); opacity: 0.35; }
  to   { transform: none; opacity: 1; }
}
.hero-names > span { animation: names-rise 1.1s cubic-bezier(0.2, 0.7, 0.1, 1) both; }
.hero-names > span + span { animation-delay: 160ms; }
.hero-meta, .hero .eyebrow { animation: names-rise 1.1s cubic-bezier(0.2, 0.7, 0.1, 1) 320ms both; }
html.reduced-motion .hero-names > span,
html.reduced-motion .hero-meta,
html.reduced-motion .hero .eyebrow { animation: none; }

/* ---- Cuenta regresiva ---- */
.cd-cell + .cd-cell { border-left: 1px solid var(--border); padding-left: clamp(0.75rem, 3vw, 2rem); }
.cd-num { color: var(--ink); }
.countdown.is-done ~ .cd-done { display: block; }

/* ---- Mapa: discreto, a tono con la página ---- */
.map-frame { border-radius: var(--radius-card); background: var(--surface-2); }
.map-frame iframe { border: 0; filter: grayscale(0.85) contrast(1.05); transition: filter 300ms; }
.map-frame:hover iframe { filter: none; }
html[data-theme="dark"] .map-frame iframe { filter: grayscale(0.85) invert(0.9) hue-rotate(180deg); }
html[data-theme="dark"] .map-frame:hover iframe { filter: invert(0.9) hue-rotate(180deg); }

/* ---- Banda oscura: código de vestimenta ---- */
.band { background: var(--x-band); color: var(--x-band-ink); }
.band-muted { color: var(--x-band-muted); }
.band-rule { border-top: 1px solid var(--x-band-line); }
.swatch {
  display: block; width: 100%; aspect-ratio: 1; max-width: 5.5rem; border-radius: 999px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}
.swatch-1 { background: var(--x-swatch-1); }
.swatch-2 { background: var(--x-swatch-2); }
.swatch-3 { background: var(--x-swatch-3); }
.swatch-4 { background: var(--x-swatch-4); }

/* ---- Regalos ---- */
.gift-icon {
  display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 999px;
  background: var(--accent-soft); color: var(--accent-strong);
}

/* ---- Confirmación ---- */
.rsvp-card { padding: clamp(1.5rem, 4vw, 2.5rem); }
.choice {
  display: flex; align-items: center; gap: 0.75rem; min-height: 3rem; padding: 0 1rem; cursor: pointer;
  border: 1px solid var(--border-strong); border-radius: var(--radius-input);
  font-size: 0.95rem; transition: border-color 150ms, background-color 150ms;
}
.choice input { accent-color: var(--accent); }
.choice:hover { border-color: var(--ink); }
.choice:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-strong); }
fieldset.field { border: 0; padding: 0; margin: 0; min-width: 0; }