/* Branding Reconquista Reversa — fundo vinho, texto marfim, destaques bege dourado.
   Paleta: vinho #360B10 · vinho 2 #782531 · marfim #FCF4E4 · dourado #967021 · bege #DDC99F · marrom #765B50 */

:root, .dark {
  --rr-vinho: #360B10;
  --rr-vinho2: #782531;
  --rr-painel: #4A151C;   /* vinho um tom acima, para cards */
  --rr-painel2: #5C1C24;  /* hover de card */
  --rr-marfim: #FCF4E4;
  --rr-dourado: #967021;
  --rr-bege: #DDC99F;
  --rr-marrom: #765B50;

  --background: 353 66% 13%;
  --foreground: 40 82% 94%;
  --card: 353 56% 19%;
  --card-foreground: 40 82% 94%;
  --popover: 353 66% 13%;
  --popover-foreground: 40 82% 94%;
  --primary: 41 47% 74%;
  --primary-foreground: 353 66% 13%;
  --secondary: 353 56% 19%;
  --secondary-foreground: 40 82% 94%;
  --muted: 353 56% 19%;
  --muted-foreground: 41 47% 74%;
  --accent: 41 47% 74%;
  --accent-foreground: 353 66% 13%;
  --destructive: 351 53% 31%;
  --destructive-foreground: 40 82% 94%;
  --border: 41 64% 36%;
  --input: 41 64% 36%;
  --ring: 41 47% 74%;
}

html, body, #root { background: var(--rr-vinho); color: var(--rr-marfim); }
body { font-family: "Source Sans 3", ui-sans-serif, system-ui, sans-serif; }
h1, h2, h3, .font-serif { font-family: "Playfair Display", Georgia, serif; letter-spacing: -0.01em; }

/* ---------- Logo no topo do quiz ---------- */
.rr-topo { display: flex; justify-content: center; padding: 18px 16px 6px; background: var(--rr-vinho); }
.rr-topo[hidden] { display: none; }
.rr-topo img { display: block; width: auto; height: 52px; max-width: 70vw; }
@media (min-width: 768px) { .rr-topo img { height: 64px; } }
/* o quiz usa min-h-screen e centraliza na vertical; com o logo em cima, desconta a altura dele */
.rr-topo:not([hidden]) + #root .min-h-screen { min-height: calc(100vh - 76px); }

/* logo dentro da barra do cronômetro (oferta): no celular só o coração, que é o início da imagem */
.rr-logo-barra { height: 30px; width: 27px; object-fit: cover; object-position: left center; flex: none; margin-right: 10px; }
@media (min-width: 480px) { .rr-logo-barra { width: auto; height: 32px; object-fit: contain; margin-right: 14px; } }
/* com 3 itens na barra, o contador encosta no logo e o botão vai para a direita */
.rr-logo-barra + div { margin-right: auto; }

/* ---------- Fundos: página vinho, cards um tom acima ---------- */
.bg-black, .bg-background, [class~="bg-[hsl(0,0%,0%)]"],
.from-gray-950, .via-gray-950, .to-gray-900 { background-color: var(--rr-vinho) !important; }

[class~="bg-[hsl(0,0%,10%)]"], [class~="bg-[hsl(0,0%,20%)]"], [class~="bg-[hsl(0,0%,30%)]"],
[class~="bg-[hsl(220,20%,15%)]"], [class~="bg-[hsl(220,20%,12%)]"], [class~="bg-[hsl(210,60%,15%)]"],
[class~="bg-[hsl(0,30%,15%)]"], [class~="bg-[hsl(0,40%,20%)]"], [class~="bg-[hsl(140,40%,18%)]"],
[class~="bg-[hsl(210,40%,25%)]"], [class~="bg-[hsl(210,60%,30%)]"],
.bg-gray-800, .bg-gray-700, .bg-muted, .bg-card, .bg-white\/5, .bg-accent\/50,
.bg-gray-100, .bg-gray-200, .bg-white, [class~="bg-[hsl(0,0%,95%)]"] {
  background-color: var(--rr-painel) !important;
  border-color: rgba(221, 201, 159, 0.35);
}
.hover\:bg-gray-700:hover, .hover\:bg-gray-100:hover, .hover\:bg-gray-600:hover { background-color: var(--rr-painel2) !important; }

/* opções do quiz: contorno bege */
button.rounded-lg:is(.bg-white, .bg-gray-100, .bg-gray-200, .bg-gray-800), div.rounded-lg:is(.bg-gray-200, .bg-gray-800)[class*="cursor-pointer"] {
  border: 1px solid rgba(221, 201, 159, 0.4) !important;
}
button.rounded-lg:is(.bg-white, .bg-gray-100, .bg-gray-200, .bg-gray-800):hover, div[class*="cursor-pointer"].rounded-lg:hover {
  border-color: var(--rr-bege) !important; background-color: var(--rr-painel2) !important;
}

/* cards de opção com foto (shadcn secondary) */
.bg-secondary { background-color: var(--rr-painel) !important; color: var(--rr-marfim) !important; border-color: rgba(221, 201, 159, 0.4) !important; }
.bg-secondary:hover, .hover\:bg-secondary\/90:hover { background-color: var(--rr-painel2) !important; border-color: var(--rr-bege) !important; }

/* barras de progresso: trilho vinho claro, preenchimento bege */
.bg-white.rounded-full[class*="h-"], .bg-primary.rounded-full[class*="h-"] { background-color: var(--rr-bege) !important; }
.bg-gray-800.rounded-full[class*="h-"], .bg-gray-700.rounded-full[class*="h-"], .bg-muted.rounded-full[class*="h-"],
[class~="bg-[hsl(0,0%,20%)]"].rounded-full { background-color: var(--rr-painel2) !important; }

/* gradientes decorativos → dourado → bege */
[class*="from-[hsl(240"], [class*="from-[hsl(45"], .from-red-500, .from-emerald-950 {
  background-image: linear-gradient(90deg, var(--rr-dourado), var(--rr-bege)) !important;
}

/* ---------- Textos: marfim, apoio e destaque em bege ---------- */
.text-white, .text-foreground, .text-black, .text-gray-800, [class~="text-[hsl(0,0%,10%)]"] { color: var(--rr-marfim) !important; }
.text-white\/90, .text-white\/80, .text-white\/70, .text-white\/60, .text-gray-300, .text-gray-500, .text-gray-600,
.text-muted-foreground, .text-foreground\/50,
[class~="text-[hsl(0,0%,70%)]"], [class~="text-[hsl(0,0%,65%)]"], [class~="text-[hsl(0,0%,60%)]"],
[class~="text-[hsl(0,0%,50%)]"], [class~="text-[hsl(0,0%,40%)]"], [class~="text-[hsl(0,0%,30%)]"] { color: var(--rr-bege) !important; }

.text-yellow-400, .text-yellow-500, .text-yellow-600, .text-amber-400, .text-primary, .text-accent,
[class~="text-[hsl(45,80%,55%)]"],
[class*="text-[hsl(210"], [class*="text-[hsl(200"], .text-blue-500, .text-blue-700,
[class*="text-[hsl(0,70%"], .text-red-500, .text-red-600, .text-red-300,
[class*="text-[hsl(140"], .text-green-600 { color: var(--rr-bege) !important; }

/* ---------- Bordas ---------- */
[class*="border-[hsl(0,0%"], .border-white\/10, .border-gray-400, .border-input, .border { border-color: rgba(221, 201, 159, 0.35) !important; }
[class~="border-[hsl(210,100%,50%)]"], .border-primary, .border-amber-400 { border-color: var(--rr-bege) !important; }

/* ---------- Botões e blocos de ação → bege dourado com texto vinho ---------- */
.bg-green-600, .bg-green-700, .bg-green-500, .bg-emerald-600, .bg-emerald-500,
[class~="bg-[hsl(210,100%,50%)]"], [class~="bg-[hsl(160,60%,40%)]"], [class~="bg-[hsl(140,60%,45%)]"],
.bg-red-600, .bg-red-500, [class~="bg-[hsl(0,70%,50%)]"], .bg-primary, .bg-foreground, .bg-destructive,
.bg-yellow-400, .bg-yellow-500, .bg-accent, .bg-amber-400\/20 {
  background-color: var(--rr-bege) !important;
  color: var(--rr-vinho) !important;
}
.hover\:bg-green-700:hover, .hover\:bg-green-600:hover, .hover\:bg-primary\/90:hover, .bg-primary\/90 { background-color: var(--rr-marfim) !important; }
:is(.bg-green-600, .bg-green-700, .bg-green-500, .bg-emerald-600, .bg-emerald-500, .bg-red-600, .bg-red-500,
    .bg-primary, .bg-foreground, .bg-destructive, .bg-yellow-400, .bg-yellow-500, .bg-accent,
    [class~="bg-[hsl(210,100%,50%)]"], [class~="bg-[hsl(160,60%,40%)]"], [class~="bg-[hsl(140,60%,45%)]"],
    [class~="bg-[hsl(0,70%,50%)]"]) :is(.text-white, .text-black, .text-foreground, [class*="text-white/"], span, p, svg) {
  color: var(--rr-vinho) !important;
}
.text-primary-foreground, .text-accent-foreground, .text-background { color: var(--rr-vinho) !important; }
.text-destructive-foreground { color: var(--rr-marfim) !important; }

/* botões principais com acabamento de selo */
a[href*="checkout"], button.bg-green-600, button.bg-green-700, a.bg-green-600 {
  box-shadow: 0 0 0 1px var(--rr-dourado), 0 8px 24px rgba(0, 0, 0, 0.35) !important;
  letter-spacing: 0.02em;
  font-weight: 700;
}

/* avatares de iniciais nos depoimentos */
[class~="bg-[hsl(180,30%,35%)]"] { background-color: var(--rr-vinho2) !important; }
[class~="bg-[hsl(220,30%,40%)]"] { background-color: var(--rr-marrom) !important; }
[class~="bg-[hsl(330,30%,60%)]"] { background-color: var(--rr-dourado) !important; }
:is([class~="bg-[hsl(180,30%,35%)]"], [class~="bg-[hsl(220,30%,40%)]"], [class~="bg-[hsl(330,30%,60%)]"]),
:is([class~="bg-[hsl(180,30%,35%)]"], [class~="bg-[hsl(220,30%,40%)]"], [class~="bg-[hsl(330,30%,60%)]"]) * { color: var(--rr-marfim) !important; }

/* anel de foco */
.ring-ring, .ring-primary, :focus-visible { --tw-ring-color: var(--rr-bege) !important; outline-color: var(--rr-bege); }

::selection { background: var(--rr-bege); color: var(--rr-vinho); }