/* Paleta Cinderela: azul bebê, rosa pastel, texto azul-acinzentado */

:root {
  --radius: 0.375rem;
  --background: #eef4fb;
  --foreground: #4a5d72;
  --card: #f8fbfe;
  --card-foreground: #3d5166;
  --primary: #a8c8e8;
  --primary-foreground: #fafcff;
  --secondary: #f3e4ea;
  --secondary-foreground: #3d5166;
  --muted: #dde8f4;
  --muted-foreground: #7a8fa8;
  --accent: color-mix(in srgb, #e8b4c8 22%, transparent);
  --accent-foreground: #3d5166;
  --border: rgba(168, 200, 232, 0.55);
  --input: rgba(61, 81, 102, 0.08);
  --ring: rgba(168, 200, 232, 0.65);

  --rose-gold: #c4a0b4;
  --rose-gold-bright: #b890a8;
  --deep-rose: #7a8fa8;
  --burgundy: #5a6f88;
  --burgundy-deep: #3d5166;
  --cream: #fafcff;
  --ink: #3d5166;

  /* Títulos em azul suave / rosa pastel */
  --gradient-gold: linear-gradient(
    135deg,
    #5a7a9a 0%,
    #6e8eb0 18%,
    #8aa8c8 38%,
    #b890a8 52%,
    #c4a0b4 68%,
    #7a9abb 85%,
    #5a7a9a 100%
  );
  --gradient-invite-title: var(--gradient-gold);

  --gradient-rose-gold-text: var(--gradient-gold);

  /* Fundos de seção — azul bebê e rosa pastel alternados */
  --section-blush-a-top: rgba(232, 242, 252, 0.92);
  --section-blush-a-mid: rgba(220, 234, 248, 0.9);
  --section-blush-a-bottom: rgba(210, 226, 244, 0.94);

  --section-blush-b-top: rgba(248, 236, 242, 0.93);
  --section-blush-b-mid: rgba(242, 226, 236, 0.9);
  --section-blush-b-bottom: rgba(236, 218, 230, 0.94);

  /* Overlay do hero — véu mais escuro para leitura das fontes */
  --gradient-veil: linear-gradient(
    180deg,
    rgba(210, 222, 238, 0.78) 0%,
    rgba(198, 212, 232, 0.72) 42%,
    rgba(220, 208, 224, 0.74) 100%
  );
  --gradient-burgundy: radial-gradient(
    ellipse at center,
    rgba(220, 234, 248, 0.45) 0%,
    rgba(238, 244, 251, 0.78) 75%
  );

  --shadow-elegant:
    0 22px 56px -18px rgba(61, 81, 102, 0.1),
    0 0 0 1px rgba(168, 200, 232, 0.22);
  --shadow-soft: 0 10px 34px -12px rgba(61, 81, 102, 0.08);
  --shadow-glow: 0 0 40px -8px rgba(196, 160, 180, 0.32);
}

html {
  background-color: var(--background);
}

body {
  background-color: var(--background);
  color: var(--foreground);
  background-image:
    radial-gradient(at 15% 0%, rgba(168, 200, 232, 0.22), transparent 52%),
    radial-gradient(at 85% 100%, rgba(232, 180, 200, 0.16), transparent 55%);
}

/* Stack do hero isolado para z-index da foto */
.hero-section {
  isolation: isolate;
}

/* Opacidades não existem no Tailwind vendido (opacity-[…]); evita damask opaco tapando o Gemini */
.hero-damask-layer {
  opacity: 0.06;
}
.section-debutante-damask {
  opacity: 0.12;
}
.section-gifts-damask {
  opacity: 0.08;
}

/* Vinhetas do topo/rodapé — tom azul-rosado */
.hero-section .from-background {
  --tw-gradient-from: rgba(238, 244, 251, 0.32) !important;
}

/* Texto sobre fundo claro — contraste reforçado no hero */
.hero-section .text-shadow-elegant,
.text-shadow-elegant {
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.75),
    0 2px 14px rgba(255, 255, 255, 0.55),
    0 1px 3px rgba(47, 66, 88, 0.2);
}

.text-gold {
  filter:
    drop-shadow(0 1px 0 rgba(255, 255, 255, 0.4))
    drop-shadow(0 2px 10px rgba(90, 122, 154, 0.18));
}

.filigree-bg {
  background-image:
    radial-gradient(circle at 48% 48%, rgba(168, 200, 232, 0.12) 0.85px, transparent 1.35px),
    radial-gradient(circle at 0 0, rgba(232, 180, 200, 0.08) 1px, transparent 2px);
  background-size: 24px 24px, 48px 48px;
}

/* Molduras sobre fundo claro */
.frame-ornate {
  border-color: rgba(168, 200, 232, 0.55);
  box-shadow:
    var(--shadow-soft),
    inset 0 0 0 1px rgba(168, 200, 232, 0.22),
    inset 0 0 36px rgba(255, 252, 255, 0.4);
}

.frame-ornate::before,
.frame-ornate::after {
  border-color: rgba(196, 160, 180, 0.55);
}

.frame-double {
  outline-color: rgba(168, 200, 232, 0.4);
}

/* Painéis claros tipo vidro fosco sobre áreas fotográficas */
.bg-soft-frame {
  background: rgba(248, 252, 255, 0.65);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.bg-soft-panel {
  background: rgba(240, 246, 252, 0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.bg-soft-address {
  background: rgba(236, 244, 252, 0.9);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.bg-soft-tile {
  background: rgba(248, 244, 250, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.bg-soft-strong {
  background: rgba(236, 242, 252, 0.95);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Elementos decorativos Cinderela */
.cinderella-deco {
  position: absolute;
  pointer-events: none;
  z-index: 1;
  user-select: none;
}

.cinderella-deco img {
  display: block;
  width: 100%;
  height: auto;
}

.cinderella-deco--birds-top {
  top: 8%;
  left: 3%;
  right: auto;
  width: 120px;
  opacity: 0.88;
}

.cinderella-deco--clock-hero {
  bottom: 8%;
  right: 3%;
  left: auto;
  width: 100px;
  opacity: 0.85;
}

.cinderella-deco--birds {
  bottom: 12%;
  left: 3%;
  width: 110px;
  opacity: 0.8;
}

.cinderella-deco--clock {
  top: 6%;
  right: 5%;
  width: 88px;
  opacity: 0.75;
}

.cinderella-deco--mice {
  bottom: 8%;
  left: 4%;
  width: 130px;
  opacity: 0.7;
}

.cinderella-deco--gus {
  bottom: 10%;
  right: 6%;
  width: 64px;
  opacity: 0.75;
}

.cinderella-deco--mary {
  top: 12%;
  left: 5%;
  width: 56px;
  opacity: 0.8;
}

.cinderella-deco--invite-slipper {
  top: -18px;
  right: -12px;
  width: 64px;
  opacity: 0.9;
  z-index: 2;
}

.cinderella-deco--invite-birds {
  bottom: -10px;
  left: -16px;
  width: 100px;
  opacity: 0.85;
  z-index: 2;
}

@media (min-width: 768px) {
  .cinderella-deco--birds-top {
    width: 168px;
  }
  .cinderella-deco--clock-hero {
    width: 130px;
  }
  .cinderella-deco--birds {
    width: 150px;
  }
  .cinderella-deco--clock {
    width: 110px;
  }
  .cinderella-deco--mice {
    width: 170px;
  }
  .cinderella-deco--gus {
    width: 80px;
  }
  .cinderella-deco--mary {
    width: 70px;
  }
  .cinderella-deco--invite-slipper {
    width: 80px;
    right: -24px;
  }
  .cinderella-deco--invite-birds {
    width: 130px;
    left: -28px;
  }
}

@media (max-width: 640px) {
  .cinderella-deco--birds-top,
  .cinderella-deco--clock-hero,
  .cinderella-deco--mice {
    opacity: 0.55;
  }
  .cinderella-deco--clock,
  .cinderella-deco--gus,
  .cinderella-deco--mary {
    display: none;
  }
}