/* =========================================================================
   THEMES.CSS — a identidade visual única do casamento (Karoline & Felipe)
   -------------------------------------------------------------------------
   Paleta boho-jóia: oliva/sálvia + azul-petróleo, ameixa e vinho, sobre
   neutros quentes (off-white, areia, linho), com acentos de ouro.
   Tipografia: Playfair Display (display) · Lora (corpo) · Great Vibes (script)
   Mood: Boho Chic · Minimalista · Atemporal · Natural · Elegante
   Valores em OKLCH. Este é o ÚNICO estilo do site (o seletor foi removido).
   ========================================================================= */

:root {
  /* ---- Neutros quentes ---- */
  --off-white:   oklch(0.94 0.012 85);
  --areia:       oklch(0.88 0.028 75);   /* areia suave (seção alternada) */
  --areia-cheia: oklch(0.79 0.038 70);   /* areia cheia (swatch) */
  --linho:       oklch(0.74 0.045 65);
  --card:        oklch(0.975 0.012 85);  /* branco quente (superfícies) */

  /* ---- Verdes (natural) ---- */
  --sage:        oklch(0.60 0.045 125);
  --oliva:       oklch(0.47 0.062 118);

  /* ---- Acentos jewel ---- */
  --petroleo:    oklch(0.38 0.058 222);
  --ameixa:      oklch(0.33 0.075 340);
  --vinho:       oklch(0.28 0.072 350);

  /* ---- Ouro (apoio) ---- */
  --gold:        oklch(0.71 0.062 83);
  --gold-soft:   oklch(0.88 0.045 85);

  /* ---- Tokens semânticos ---- */
  --bg:          var(--off-white);
  --bg-alt:      var(--areia);
  --bg-dark:     var(--vinho);
  --text:        var(--vinho);
  --text-soft:   oklch(0.42 0.025 60);   /* taupe aquecido (≥4.5:1 nos dois fundos) */
  --text-inv:    oklch(0.97 0.010 85);
  --accent:      var(--oliva);
  --accent-2:    var(--ameixa);
  --accent-soft: oklch(0.90 0.035 125);  /* sage pálido (focus ring) */
  --line:        oklch(0.70 0.045 65 / 0.30);
  --gold-line:   oklch(0.71 0.062 83 / 0.50);

  /* ---- Hero (gradient claro: sage pálido → off-white → areia) ---- */
  --hero-gradient: radial-gradient(130% 92% at 50% 0%,
                     oklch(0.96 0.035 120) 0%,
                     var(--off-white) 52%,
                     oklch(0.88 0.040 80) 100%);
  --hero-overlay: linear-gradient(180deg, transparent 60%, oklch(0.78 0.05 70 / 0.10));

  /* ---- Tipografia ---- */
  --font-display: 'Playfair Display', Georgia, serif;
  --font-body:    'Lora', Georgia, serif;
  --font-script:  'Great Vibes', cursive;

  --radius: 3px;
  color-scheme: light;
}

/* =========================================================================
   Refinamentos da identidade
   ========================================================================= */

/* ---- Kicker em script (substitui o eyebrow maiúsculo rastreado — trope de IA).
        Vira assinatura em script, lowercase, no verde-oliva. ---- */
.eyebrow {
  font-family: var(--font-script);
  text-transform: none;
  letter-spacing: 0;
  font-size: clamp(1.4rem, 2.6vw, 1.75rem);
  font-weight: 400;
  color: var(--oliva);
  line-height: 1;
  margin-bottom: 0.15rem;
}
.section-title { font-weight: 500; letter-spacing: 0.005em; }

/* ---- Hero (gradient claro: textos em vinho/oliva) ---- */
.hero { color: var(--text); }
.nav__brand, .nav__links a, .nav__toggle { color: var(--text); }
.hero__monogram { color: var(--oliva); opacity: 0.14; }
.hero__names { font-weight: 500; letter-spacing: 0.012em; }
.hero__amp {
  font-family: var(--font-script);
  font-style: normal;
  font-weight: 400;
  color: var(--oliva);
  padding-inline: 0.12em;
}
.hero__eyebrow { color: var(--oliva); opacity: 0.95; }
.hero__inner { position: relative; z-index: 2; }
.hero__scroll { z-index: 2; color: var(--oliva); opacity: 0.75; }

/* moldura dourada fina (ar de convite). Topo recua pra não cruzar o nav. */
.hero__frame {
  position: absolute;
  inset: clamp(56px, 7vw, 72px) clamp(16px, 3vw, 28px) clamp(16px, 3vw, 28px);
  z-index: 0; border: 1px solid var(--gold-line); pointer-events: none;
}
.hero__frame::after {
  content: ''; position: absolute; inset: 5px;
  border: 1px solid var(--gold-line); opacity: 0.55;
}

/* folhagens em svg (sutis) */
.hero__leaf {
  position: absolute; z-index: 1; width: clamp(170px, 24vw, 300px);
  color: var(--oliva); opacity: 0.36; pointer-events: none;
}
.hero__leaf--bl { bottom: -5%; left: -3%; transform: rotate(-6deg); }
.hero__leaf--tr { top: 5%; right: -3%; transform: rotate(174deg) scaleX(-1); }

/* ramos de louro ladeando os nomes (hero) */
.hero__laurel {
  position: absolute; top: 52%; z-index: 1; width: clamp(64px, 8vw, 108px);
  color: var(--oliva); opacity: 0.4; pointer-events: none;
}
.hero__laurel--l { left: clamp(1%, 4vw, 6%); transform: translateY(-50%); }
.hero__laurel--r { right: clamp(1%, 4vw, 6%); transform: translateY(-50%) scaleX(-1); }
@media (max-width: 900px) { .hero__laurel { display: none; } }
.lf-stem { fill: none; stroke: currentColor; stroke-width: 0.85; stroke-linecap: round; }
.lf-leaf { fill: currentColor; }

/* divisor com folhinha entre os nomes e a data */
.hero__divider {
  display: flex; align-items: center; justify-content: center; gap: 0.9rem;
  margin: 1.6rem auto 1.4rem; max-width: 18rem; color: var(--oliva);
}
.hero__divider::before, .hero__divider::after {
  content: ''; flex: 1; height: 1px; background: var(--gold-line);
}
.hero__divider-leaf { width: 13px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1; }

/* CTA do hero usa o botão padrão (oliva) + varão ghost, sobre o gradient claro */

/* data em evidência na contagem regressiva */
.section-head .countdown-date {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(1.35rem, 3.2vw, 2rem);
  color: var(--vinho); letter-spacing: 0.03em; margin-top: 1rem;
}

/* ---- Divisor dourado com folhinha (em vez do losango) ---- */
.rule { color: var(--gold); max-width: 16rem; }
.rule::before, .rule::after { background: var(--gold-line); }
.rule__dot {
  width: 9px; height: 13px; transform: rotate(45deg);
  background: var(--gold); border-radius: 50% 0 50% 0;
}

/* ---- Contagem regressiva ---- */
.countdown__num { color: var(--vinho); }
.countdown__label { color: var(--text-soft); }

/* ---- Timeline (Nossa História) ---- */
.tl-year { color: var(--oliva); font-style: italic; }
.tl-dot {
  background: var(--gold);
  border-color: var(--bg);
  box-shadow: 0 0 0 1px var(--gold-line);
}

/* ---- Local / Venue ---- */
.venue__eyebrow { color: var(--oliva); letter-spacing: 0.22em; }
.venue__name { color: var(--vinho); }
.venue__time { color: var(--ameixa); }
.venue__map { filter: sepia(0.18) saturate(0.92) contrast(1.02); }

/* ---- RSVP ---- */
.field label { color: var(--text-soft); letter-spacing: 0.14em; }
.choice input:checked + label {
  background: var(--oliva);
  border-color: var(--oliva);
  color: var(--text-inv);
}
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--oliva);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

/* ---- Presentes / Infos / Venue / Form: superfície quente + sombra sutil ---- */
.venue, .gift, .info-card, .rsvp-form {
  background: var(--card);
  border-color: var(--line);
  box-shadow: 0 22px 44px -34px oklch(0.28 0.072 350 / 0.45);
}
.gift__title, .info-card h3, .venue__name { letter-spacing: 0.01em; }
.gift__icon, .info-card__icon { color: var(--gold); }
.info-card__contact { color: var(--oliva); }
.pix-box { background: var(--areia); }
.pix-copy { color: var(--oliva); }

/* ---- Ícones line-art (substituem os emojis) ---- */
.ico { width: 1.7em; height: 1.7em; display: block; margin-inline: auto; }

/* ---- Galeria (placeholder) ---- */
.ph { color: var(--linho); }

/* ---- Botão padrão ---- */
.btn { background: var(--oliva); border-color: var(--oliva); color: var(--text-inv); }
.btn--ghost { background: transparent; color: var(--oliva); border-color: var(--oliva); }
.btn--ghost:hover { background: var(--oliva); color: var(--text-inv); }

/* ---- Rodapé ---- */
.footer { background: var(--vinho); }
.footer .script { color: var(--gold); font-size: clamp(1.7rem, 3vw, 2.1rem); }
.footer__hash { color: var(--off-white); }
.footer p { color: oklch(0.82 0.020 60); }
.footer__credit { color: oklch(0.66 0.030 70); }

/* =========================================================================
   Mais ornamentos botânicos + mais delicadeza (refino boho)
   ========================================================================= */
:root { --section-y: clamp(4.5rem, 11vw, 8rem); }
body { line-height: 1.72; }

/* seções viram contexto pros ornamentos de canto */
.section { position: relative; overflow: hidden; }
.section .container { position: relative; z-index: 1; }

/* divisor botânico delicado sob cada título de seção */
.section-title::after {
  content: ''; display: block; width: 150px; height: 14px;
  margin: 1rem auto 0; opacity: 0.8;
  background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 14'><line x1='4' y1='7' x2='62' y2='7' stroke='%23b59b6e' stroke-width='0.8'/><line x1='88' y1='7' x2='146' y2='7' stroke='%23b59b6e' stroke-width='0.8'/><path d='M75 1.5C79 4.5 79 9.5 75 12.5C71 9.5 71 4.5 75 1.5Z' fill='%23728250'/></svg>") center / contain no-repeat;
}

/* folhagens de canto nas seções em destaque */
.leaf-corner {
  position: absolute; z-index: 0; width: clamp(120px, 17vw, 200px);
  color: var(--sage); opacity: 0.2; pointer-events: none;
}
.leaf-corner--tl { top: -4%; left: -3%; transform: rotate(26deg); }
.leaf-corner--br { bottom: -6%; right: -3%; transform: rotate(206deg) scaleX(-1); }

/* mini-sprig reaproveitável (vertical, funciona em qualquer canto) */
:root {
  --sprig: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 90'><path d='M30 86V10' fill='none' stroke='%23728250' stroke-width='0.9' stroke-linecap='round'/><path d='M0 0C5 -5 5 -13 0 -18C-5 -13 -5 -5 0 0Z' fill='%23728250' transform='translate(30 70) rotate(-48)'/><path d='M0 0C5 -5 5 -13 0 -18C-5 -13 -5 -5 0 0Z' fill='%23728250' transform='translate(30 70) rotate(48)'/><path d='M0 0C5 -5 5 -13 0 -18C-5 -13 -5 -5 0 0Z' fill='%23728250' transform='translate(30 50) rotate(-50) scale(.92)'/><path d='M0 0C5 -5 5 -13 0 -18C-5 -13 -5 -5 0 0Z' fill='%23728250' transform='translate(30 50) rotate(50) scale(.92)'/><path d='M0 0C5 -5 5 -13 0 -18C-5 -13 -5 -5 0 0Z' fill='%23728250' transform='translate(30 30) rotate(-52) scale(.8)'/><path d='M0 0C5 -5 5 -13 0 -18C-5 -13 -5 -5 0 0Z' fill='%23728250' transform='translate(30 30) rotate(52) scale(.8)'/></svg>");
}

/* folhagens de canto em TODAS as seções */
.section::before, .section::after {
  content: ''; position: absolute; z-index: 0;
  width: clamp(72px, 9vw, 112px); aspect-ratio: 60 / 90;
  background: var(--sprig) no-repeat center / contain;
  opacity: 0.32; pointer-events: none;
}
.section::before { top: 3%; left: 3%; }
.section::after { bottom: 4%; right: 3%; }

/* rodapé ganha contexto pros ornamentos */
.footer { position: relative; overflow: hidden; }
.footer .container { position: relative; z-index: 1; }
.footer .leaf-corner { opacity: 0.26; }

/* grinalda do rodapé */
.footer__garland {
  display: block; width: clamp(220px, 30vw, 340px); margin: 0 auto 1.4rem;
  color: var(--gold); opacity: 0.55;
}

/* delicadeza: kicker menor, sombras mais suaves, botão mais arejado */
.eyebrow { font-size: clamp(1.3rem, 2.5vw, 1.65rem); }
.venue, .gift, .info-card, .rsvp-form {
  box-shadow: 0 26px 52px -38px oklch(0.28 0.072 350 / 0.38);
}
.btn { padding: 0.9rem 2.1rem; }