/* =========================================================
   Identidade clara: ~80% branco, letras pretas, dourado nos detalhes.
   Dourado tirado das capas dos destaques do @gabrielprimo.maker.
   Carregado depois do style.css em todas as páginas.
   ========================================================= */
:root {
  --bg: #ffffff;
  --soft: #f7f5f1;          /* cinza quente bem claro pros blocos */
  --line: #e9e4da;          /* linhas finas */
  --ink: #111111;           /* texto */
  --ink-dim: #5e5a54;       /* texto secundário */
  --ink-faint: #8f8a82;
  --gold: #a88858;          /* dourado da marca */
  --gold-light: #c4a978;
  --gold-deep: #86683a;     /* dourado pra texto pequeno (lê melhor no branco) */
  --radius: 18px;

  /* dourado em degradê (botões, anéis, palavras de destaque) */
  --gold-grad: linear-gradient(135deg, #d8bf8c 0%, #b8995f 38%, #a88858 60%, #86683a 100%);
  --gold-sheen: linear-gradient(110deg, #86683a 0%, #b8995f 30%, #e2cc9c 48%, #b8995f 66%, #86683a 100%);

  /* tipografia: Bodoni Moda (títulos), Manrope (texto), DM Mono (detalhes de câmera) */
  --serif: "Bodoni Moda", "Didot", "Bodoni 72", Georgia, serif;
  --sans: "Manrope", system-ui, sans-serif;
  --mono: "DM Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* reaproveita os nomes do style.css */
  --paper: #ffffff;
  --paper-deep: var(--soft);
  --warm: var(--gold);
}
h1, h2, h3 { text-wrap: balance; }
.gold-text {
  background: linear-gradient(110deg, #6c522c 0%, #9a7a48 35%, #c09a5c 50%, #9a7a48 65%, #6c522c 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

body { background: var(--bg); color: var(--ink); }
::selection { background: #a8885833; color: var(--ink); }
body::before { opacity: .02; }

/* ---------- Página de casamento: blocos que eram pretos ficam claros ---------- */
.site-header.is-scrolled { background: #fffffff0; border-bottom-color: var(--line); }
.mobile-menu { background: #fff; color: var(--ink); }
.mobile-menu .brand-inverse { color: var(--ink); }
.mobile-menu-top button { color: var(--ink); }
.mobile-menu nav, .mobile-menu nav a { border-color: var(--line); }
.mobile-menu nav a span { color: var(--gold-deep); }
.mobile-menu > p { color: var(--ink-faint); }

.intro-section, .offer-section { background: #fff; }
.portfolio-section { background: var(--soft); }
.about-maker { background: var(--soft); }
.italic-heading, .maker-copy h2 em { color: var(--gold-deep); }
.text-link { border-color: var(--gold); }
.text-link .icon { color: var(--gold-deep); }
.section-rule { background: var(--line); }
.filters button.active::after { background: var(--gold); }
.gallery-card, .intro-image-wrap img, .experience-image img { border-radius: 14px; }
.gallery-card { overflow: hidden; }

.marquee { background: #fff; color: var(--ink); border-color: var(--line); }
.marquee-track i { color: var(--gold); }

.experience-section { background: var(--soft); color: var(--ink); }
.experience-section .eyebrow.light { color: var(--gold-deep); }
.experience-top h2 em { color: var(--gold-deep); }
.experience-lead { color: var(--ink-dim); }
.steps, .steps article { border-color: var(--line); }
.steps span { color: var(--gold-deep); font-weight: 700; }
.steps p { color: var(--ink-dim); }
.experience-image span { background: #ffffffe6; color: var(--ink); border-radius: 999px; padding: 7px 14px; }
.experience-image { padding-bottom: 60px; }

.offer-body li .icon { color: var(--gold); }
.dark-button { background: var(--ink); }
.warm-button { background: var(--gold); color: #fff; }
.warm-button:hover { background: var(--gold-deep); }
.primary-button { border-radius: 999px; }

.contact-section { background: #fff; color: var(--ink); }
.contact-image img { border-radius: 0; }
.contact-panel .eyebrow.light { color: var(--gold-deep); }
.contact-panel > p:not(.eyebrow) { color: var(--ink-dim); }
.contact-panel label > span { color: var(--ink-faint); }
.contact-panel input { color: var(--ink); border-bottom-color: #11111133; color-scheme: light; }
.contact-panel input::placeholder { color: #11111159; }
.contact-panel input:focus { border-color: var(--gold); }
.input-icon .icon { color: var(--ink-faint); }
.form-note { color: var(--ink-faint); }

footer { background: var(--soft); color: var(--ink); border-top: 1px solid var(--line); }
footer .brand-inverse { color: var(--ink); }
.footer-main > p { color: var(--ink-dim); }
.footer-main > a { border-bottom-color: var(--gold); }
.footer-bottom { color: var(--ink-faint); border-top-color: var(--line); }

.toast { background: #fff; border-color: var(--line); border-radius: 999px; }

/* foto ampliada: fundo claro e botões redondos brancos */
.lightbox { background: #fffffff7; color: var(--ink); }
.lightbox figcaption span { color: var(--ink-faint); }
.lightbox-close, .lightbox-arrow { background: #fff; color: var(--ink); border-color: var(--line); box-shadow: 0 4px 14px #1111111a; }
.lightbox figure img { border-radius: 10px; }


/* ---------- ajustes de tipografia pra Bodoni Moda (página de casamento) ---------- */
.eyebrow { font-family: var(--mono); font-weight: 500; letter-spacing: .14em; font-size: 10px; }
.hero h1 { font-size: clamp(46px, 13.5vw, 108px); line-height: .96; letter-spacing: -.03em; font-weight: 500; }
.hero h1 em { font-weight: 400; color: #e2cc9c; }
.intro-copy h2, .portfolio-heading h2, .offer-title h2 { line-height: 1.02; letter-spacing: -.025em; font-weight: 500; }
.italic-heading { font-weight: 400; }
.maker-copy h2 { line-height: .96; letter-spacing: -.03em; font-weight: 500; }
.experience-top h2 { line-height: .94; letter-spacing: -.03em; font-weight: 500; }
.statement-copy blockquote { line-height: .98; letter-spacing: -.025em; font-weight: 500; }
.contact-panel h2 { line-height: 1.02; letter-spacing: -.025em; font-weight: 500; }
.steps h3 { font-weight: 500; }
.gallery-meta strong, .brand-name { font-weight: 500; }
.section-number, .marquee-track { font-weight: 400; }