/* Mundo TPM · Poder Rosa — design tokens
   Fonte de verdade de cor/tipografia/espaçamento para todos os componentes e telas. */

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;600;700;800&family=Work+Sans:ital,wght@0,400;0,500;0,600;1,400&family=Poppins:wght@300;400;500;600;700&display=swap');

:root {
  /* cor — marca */
  --pink:        #FF0080;
  --pink-deep:   #C4005F;
  --pink-pale:   #FFDDEE;
  --pink-bg:     #E00073;  /* fundo sólido tipo peça de campanha */

  /* cor — recompensa */
  --gold:        #B8862E;
  --gold-deep:   #8A6519;
  --gold-soft:   #F3E6C6;

  /* cor — rosé (linguagem glass, referência Pinterest) */
  --dust-1:      #FFEDF5;
  --dust-2:      #FFC7E1;
  --dust-3:      #FF8CC0;
  --dust-4:      #F0479B;
  --dust-deep:   #C4005F;
  --dust-ink:    #2B0616;

  /* cor — neutros (viés magenta, não cinza puro) */
  --ink:         #241019;
  --ink-soft:    #6B5560;
  --ink-faint:   #9C8892;
  --bg:          #FFF6FA;
  --surface:     #FFFFFF;
  --surface-tint:#FFEDF5;
  --line:        rgba(36,16,25,0.12);
  --line-strong: rgba(36,16,25,0.22);
  --on-pink:     #FFFFFF;

  /* tipografia */
  --font-display: "Sora", "Segoe UI", sans-serif;
  --font-body:    "Work Sans", -apple-system, "Segoe UI", sans-serif;

  /* espaçamento — escala 4px */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-7: 32px; --sp-8: 40px;
  --sp-9: 56px; --sp-10: 72px;

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-pill: 100px;

  --shadow-sm: 0 1px 2px rgba(36,16,25,0.08);
  --shadow-md: 0 8px 24px rgba(36,16,25,0.10);
  --shadow-card: 0 1px 2px rgba(36,16,25,0.06), 0 8px 24px rgba(36,16,25,0.07);
}

/* O site é sempre no tema claro, independente do modo claro/escuro do
   dispositivo — por isso não há mais um @media (prefers-color-scheme: dark)
   aqui. Os blocos [data-theme] abaixo ficam prontos caso um toggle manual
   de tema seja adicionado no futuro, mas nada aplica data-theme hoje. */
:root { color-scheme: light; }
:root[data-theme="light"] {
  --dust-1:      #FFEDF5;
  --dust-2:      #FFC7E1;
  --dust-3:      #FF8CC0;
  --dust-4:      #F0479B;
  --dust-deep:   #C4005F;
  --dust-ink:    #2B0616;
  --pink:        #FF0080;
  --pink-deep:   #C4005F;
  --pink-pale:   #FFDDEE;
  --pink-bg:     #E00073;
  --gold:        #B8862E;
  --gold-deep:   #8A6519;
  --gold-soft:   #F3E6C6;
  --ink:         #241019;
  --ink-soft:    #6B5560;
  --ink-faint:   #9C8892;
  --bg:          #FFF6FA;
  --surface:     #FFFFFF;
  --surface-tint:#FFEDF5;
  --line:        rgba(36,16,25,0.12);
  --line-strong: rgba(36,16,25,0.22);
  --shadow-sm: 0 1px 2px rgba(36,16,25,0.08);
  --shadow-md: 0 8px 24px rgba(36,16,25,0.10);
  --shadow-card: 0 1px 2px rgba(36,16,25,0.06), 0 8px 24px rgba(36,16,25,0.07);
}
:root[data-theme="dark"] {
  --pink:        #FF3D97;
  --pink-deep:   #FF85BE;
  --pink-pale:   #3D0F26;
  --pink-bg:     #E00073;
  --gold:        #E4C066;
  --gold-deep:   #C9A24A;
  --gold-soft:   #3A2C10;
  --ink:         #F7ECF1;
  --ink-soft:    #CBAAB9;
  --ink-faint:   #8E7182;
  --bg:          #1B0A13;
  --surface:     #24101B;
  --surface-tint:#33111F;
  --line:        rgba(247,236,241,0.14);
  --line-strong: rgba(247,236,241,0.26);
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.35);
  --shadow-md: 0 12px 32px rgba(0,0,0,0.4);
  --shadow-card: 0 1px 2px rgba(0,0,0,0.3), 0 12px 28px rgba(0,0,0,0.35);
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { font-family: var(--font-display); color: var(--ink); margin: 0; text-wrap: balance; }

.eyebrow {
  font-family: var(--font-display); font-size: 12px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--pink); margin: 0 0 12px;
}

.btn {
  font-family: var(--font-display);
  font-weight: 700; font-size: 14.5px;
  border-radius: var(--radius-pill);
  padding: 13px 26px;
  border: none; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--pink); color: #fff; box-shadow: var(--shadow-md); }
.btn-primary:hover { box-shadow: 0 10px 28px rgba(255,0,128,0.38); }
.btn-gold { background: linear-gradient(135deg, var(--gold), var(--gold-deep)); color: #fff; box-shadow: var(--shadow-md); }
.btn-outline { background: transparent; color: var(--pink); border: 1.5px solid var(--pink); }
.btn-outline-light { background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,0.6); }

.moeda-chip {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--gold-soft); color: var(--gold-deep);
  font-family: var(--font-display); font-weight: 700; font-size: 13.5px;
  padding: 7px 14px 7px 8px; border-radius: var(--radius-pill);
  font-variant-numeric: tabular-nums;
}
.moeda-chip .coin-icon { width: 20px; height: 20px; flex: none; }

/* moeda — ícone puro em CSS, sem SVG (evita colisão de id em telas com várias moedas) */
.coin-icon {
  border-radius: 50%;
  position: relative;
  background: radial-gradient(circle at 32% 28%, #F6DA8C, #C79A3D 55%, #8A6519 100%);
  box-shadow: inset 0 -2px 3px rgba(0,0,0,0.28), inset 0 1px 1px rgba(255,255,255,0.55), 0 1px 1px rgba(0,0,0,0.15);
}
.coin-icon::after {
  content: "";
  position: absolute; inset: 27%;
  background: #fff; opacity: 0.6;
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

/* =======================================================
   Linguagem "glass" — referência Pinterest (login/flyer)
   Tipografia arredondada (Poppins), superfícies translúcidas
   sobre fundo com esferas 3D em CSS, botões pill escuros.
   ======================================================= */

.font-soft { font-family: "Poppins", var(--font-display); }

/* fundo decorativo: gradiente areia/rosé + grão. As moedas da marca entram
   por cima via .coin-layer (ou o componente CoinField). */
.dust-scene {
  position: relative;
  background:
    radial-gradient(circle at 18% 8%, rgba(255,255,255,0.55), transparent 38%),
    linear-gradient(165deg, var(--dust-1) 0%, var(--dust-2) 45%, var(--dust-3) 78%, var(--dust-4) 100%);
  overflow: hidden;
}
.dust-scene::before {
  /* grão sutil — textura de areia/gesso da referência */
  content: "";
  position: absolute; inset: 0; pointer-events: none; opacity: 0.5; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.35'/%3E%3C/svg%3E");
}
/* moedas da marca no fundo — parallax + flutuar (ver componente CoinField) */
@keyframes coin-float {
  0%, 100% { transform: translateY(0) rotate(var(--coin-rot, 0deg)); }
  50%      { transform: translateY(-14px) rotate(calc(var(--coin-rot, 0deg) + 2deg)); }
}
.coin-layer { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.coin { position: absolute; display: block; will-change: transform; }
.coin img { width: 100%; height: 100%; display: block; }

.orb { position: absolute; border-radius: 50%; }
.orb-glass {
  background: radial-gradient(circle at 34% 24%, rgba(255,255,255,0.95), rgba(255,140,192,0.55) 45%, rgba(196,0,95,0.62) 100%);
  box-shadow: inset 0 -14px 26px rgba(80,20,35,0.28), inset 0 8px 14px rgba(255,255,255,0.55), 0 24px 44px rgba(80,20,35,0.22);
}
.orb-matte {
  background: radial-gradient(circle at 32% 22%, #FFE3EF, #FF8CC0 55%, #D0347F 100%);
  box-shadow: inset 0 -10px 18px rgba(80,20,35,0.2), 0 16px 30px rgba(80,20,35,0.16);
}
.orb-gold {
  background: radial-gradient(circle at 32% 22%, #F6DA8C, #C79A3D 55%, #8A6519 100%);
  box-shadow: inset 0 -10px 18px rgba(60,40,0,0.3), inset 0 6px 10px rgba(255,255,255,0.5), 0 16px 30px rgba(60,40,0,0.2);
}

/* cartão de vidro */
.glass-card {
  position: relative;
  border-radius: var(--radius-lg);
  background: linear-gradient(160deg, rgba(255,255,255,0.5), rgba(255,255,255,0.16));
  backdrop-filter: blur(22px) saturate(140%);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  border: 1px solid rgba(255,255,255,0.55);
  box-shadow: 0 10px 34px rgba(70,20,35,0.16);
}
.glass-field {
  display: flex; align-items: center; gap: 10px;
  background: rgba(255,255,255,0.72);
  border-radius: var(--radius-pill);
  padding: 13px 8px 13px 8px;
}
.glass-field .ic {
  width: 30px; height: 30px; border-radius: 50%; background: #fff;
  display: flex; align-items: center; justify-content: center; flex: none;
  box-shadow: 0 1px 2px rgba(70,20,35,0.12);
}
.glass-field .ic svg { width: 15px; height: 15px; stroke: var(--dust-deep); fill: none; stroke-width: 1.6; }
.glass-field input {
  border: none; background: transparent; outline: none;
  font-family: "Poppins", var(--font-display); font-size: 13.5px; color: var(--dust-ink);
  flex: 1; min-width: 0;
}
.glass-field input::placeholder { color: rgba(42,20,24,0.45); }

.pill-ghost {
  background: rgba(255,255,255,0.55); border: 1px solid rgba(255,255,255,0.7);
  border-radius: var(--radius-pill); padding: 8px 14px 8px 10px;
  display: inline-flex; align-items: center; gap: 6px;
  font-family: "Poppins", var(--font-display); font-size: 12px; font-weight: 500; color: var(--dust-ink);
}
.pill-dark {
  background: var(--dust-ink); color: #fff;
  border-radius: var(--radius-pill);
  display: inline-flex; align-items: center; gap: 8px;
  font-family: "Poppins", var(--font-display); font-weight: 500; font-size: 13px;
  padding: 10px 8px 10px 18px;
}
.pill-dark .arrow {
  width: 26px; height: 26px; border-radius: 50%; background: rgba(255,255,255,0.16);
  display: flex; align-items: center; justify-content: center;
}
.pill-dark .arrow svg { width: 13px; height: 13px; stroke: #fff; fill: none; stroke-width: 2; }
.fab-dark {
  width: 46px; height: 46px; border-radius: 50%; background: var(--dust-ink);
  display: flex; align-items: center; justify-content: center; flex: none; border: none; cursor: pointer;
}
.fab-dark svg { width: 17px; height: 17px; stroke: #fff; fill: none; stroke-width: 2; }