/* =============================================
   RETRO — Theme System (Light + Dark)
   ============================================= */

/* ── Light theme (padrão) ─────────────────── */

:root {
  --bg:                 #f5f1eb;   /* off-white quente */
  --surface:            #ffffff;
  --surface-2:          #ede9e0;   /* colunas do board */
  --surface-3:          #e4dfd5;
  --border:             rgba(0, 0, 0, 0.08);
  --border-strong:      rgba(0, 0, 0, 0.14);
  --accent:             #0d9488;   /* teal-600 — lê bem no claro */
  --accent-hover:       #0f766e;
  --accent-text:        #ffffff;   /* texto sobre botão teal */
  --accent-bg:          rgba(13, 148, 136, 0.08);
  --accent-border:      rgba(13, 148, 136, 0.22);
  --accent-border-mid:  rgba(13, 148, 136, 0.35);
  --accent-border-str:  rgba(13, 148, 136, 0.55);
  --text:               #292524;   /* stone-800 — warm dark */
  --text-muted:         #57534e;   /* stone-600 — warm mid */
  --text-dim:           #78716c;   /* stone-500 — warm light */
  --dot-color:          rgba(0, 0, 0, 0.035);
  --focus-ring:         rgba(13, 148, 136, 0.25);
}

/* ── Dark theme ────────────────────────────── */

[data-theme="dark"] {
  --bg:                 #0f1117;
  --surface:            #1c2438;   /* cards — mais claro que colunas */
  --surface-2:          #161c2c;   /* colunas — mais escuro que cards */
  --surface-3:          #1e2d40;   /* hover/destaque — mais claro que cards */
  --border:             rgba(255, 255, 255, 0.07);
  --border-strong:      rgba(255, 255, 255, 0.13);
  --accent:             #14e8c8;
  --accent-hover:       #0fd4b5;
  --accent-text:        #0a0f18;
  --accent-bg:          rgba(20, 232, 200, 0.15);
  --accent-border:      rgba(20, 232, 200, 0.25);
  --accent-border-mid:  rgba(20, 232, 200, 0.35);
  --accent-border-str:  rgba(20, 232, 200, 0.55);
  --text:               #e2e8f0;
  --text-muted:         #94a3b8;
  --text-dim:           #8899b4;   /* contraste ≥ 4.5:1 sobre surfaces dark */
  --dot-color:          rgba(255, 255, 255, 0.04);
  --focus-ring:         rgba(20, 232, 200, 0.25);
}

/* ── Base ─────────────────────────────────── */

*, *::before, *::after {
  font-family: 'DM Sans', system-ui, sans-serif;
}

body {
  background-color: var(--bg) !important;
  background-image: radial-gradient(circle, var(--dot-color) 1px, transparent 1px);
  background-size: 28px 28px;
  color: var(--text) !important;
}

h1, h2, h3, h4 {
  font-family: 'Syne', sans-serif !important;
}

/* ── Nav ──────────────────────────────────── */

nav {
  background-color: var(--surface) !important;
  border-color: var(--border) !important;
}

.retro-brand {
  font-family: 'Syne', sans-serif;
  color: var(--accent) !important;
  letter-spacing: -0.02em;
}
.retro-brand:hover {
  color: var(--accent-hover) !important;
}

/* ── Surfaces (via vars — ambos os temas) ─── */

.bg-white   { background-color: var(--surface)   !important; }
.bg-gray-50 { background-color: var(--surface-2) !important; }

/* ── Borders (via vars — ambos os temas) ──── */

.border-gray-200,
.border-gray-100 { border-color: var(--border) !important; }

.border-gray-300 { border-color: var(--border-strong) !important; }

.divide-gray-100 > :not([hidden]) ~ :not([hidden]) {
  border-color: var(--border) !important;
}

/* ── Text (via vars — ambos os temas) ─────── */

.text-gray-900 { color: var(--text)       !important; }
.text-gray-800 { color: var(--text)       !important; }
.text-gray-700 { color: var(--text-muted) !important; }
.text-gray-600 { color: var(--text-muted) !important; }
.text-gray-500 { color: var(--text-muted) !important; }
.text-gray-400 { color: var(--text-dim)   !important; }

/* ── Dark-only: ajustes de texto ─────────── */

[data-theme="dark"] .text-gray-800 { color: #d0d8e4 !important; }
[data-theme="dark"] .text-gray-700 { color: #b0bccc !important; }
[data-theme="dark"] .bg-gray-100   { background-color: rgba(255,255,255,0.05) !important; }

/* ── Identidade: Indigo → Teal (ambos) ───── */

.bg-indigo-600 {
  background-color: var(--accent)      !important;
  color:            var(--accent-text) !important;
}
.hover\:bg-indigo-700:hover {
  background-color: var(--accent-hover) !important;
  color:            var(--accent-text)  !important;
}

.bg-indigo-100 { background-color: var(--accent-bg) !important; }
.bg-indigo-50  { background-color: var(--accent-bg) !important; }

.text-indigo-600 { color: var(--accent)       !important; }
.text-indigo-800 { color: var(--accent)       !important; }

.hover\:text-indigo-600:hover { color: var(--accent)       !important; }
.hover\:text-indigo-700:hover { color: var(--accent-hover) !important; }

.border-indigo-200 { border-color: var(--accent-border)     !important; }
.border-indigo-300 { border-color: var(--accent-border-mid) !important; }
.border-indigo-400 { border-color: var(--accent-border-str) !important; }

.focus\:ring-indigo-500:focus {
  --tw-ring-color: var(--focus-ring) !important;
}

/* ── Readiness counter — animação ao atualizar ── */

@keyframes counter-pop {
  0%   { transform: scale(1.2); opacity: 0.6; }
  100% { transform: scale(1);   opacity: 1; }
}

.readiness-counter {
  animation: counter-pop 200ms ease-out;
}

/* ── Emerald (readiness) — global ─────────── */

.bg-emerald-600 { background-color: #10b981 !important; color: #fff !important; }
.hover\:bg-emerald-700:hover { background-color: #059669 !important; }

/* ── Emerald — dark ajustes ───────────────── */

[data-theme="dark"] .bg-emerald-100   { background-color: rgba(52,211,153,0.1) !important; }
[data-theme="dark"] .text-emerald-700 { color: #34d399 !important; }

/* ── Amber — dark ajustes ─────────────────── */

[data-theme="dark"] .bg-amber-100     { background-color: rgba(251,191,36,0.1)  !important; }
[data-theme="dark"] .bg-amber-50      { background-color: rgba(251,191,36,0.07) !important; }
[data-theme="dark"] .text-amber-800   { color: #fbbf24 !important; }
[data-theme="dark"] .border-amber-200 { border-color: rgba(251,191,36,0.2) !important; }

/* ── Red (errors / danger) — global ─────── */

.bg-red-600              { background-color: #dc2626 !important; color: #fff !important; }
.hover\:bg-red-700:hover { background-color: #b91c1c !important; }

/* ── Red — dark ajustes ───────────────────── */

[data-theme="dark"] .bg-red-50              { background-color: rgba(239,68,68,0.08) !important; }
[data-theme="dark"] .border-red-200         { border-color: rgba(239,68,68,0.2) !important; }
[data-theme="dark"] .text-red-800           { color: #fca5a5 !important; }
[data-theme="dark"] .text-red-700           { color: #fca5a5 !important; }
[data-theme="dark"] .text-red-600           { color: #f87171 !important; }
[data-theme="dark"] .text-red-400           { color: #f87171 !important; }
[data-theme="dark"] .hover\:text-red-500:hover { color: #f87171 !important; }
[data-theme="dark"] .hover\:text-red-600:hover { color: #ef4444 !important; }

/* ── Green — dark ajustes ─────────────────── */

[data-theme="dark"] .bg-green-50      { background-color: rgba(74,222,128,0.07) !important; }
[data-theme="dark"] .bg-green-100     { background-color: rgba(74,222,128,0.1)  !important; }
[data-theme="dark"] .border-green-200 { border-color: rgba(74,222,128,0.2) !important; }
[data-theme="dark"] .text-green-700   { color: #4ade80 !important; }

/* ── Cores de categoria do resultado ─────── */
/* Mesmo valor funciona em ambos os temas */

.border-l-green-400  { border-left-color: #4ade80 !important; }
.border-l-red-400    { border-left-color: #f87171 !important; }
.border-l-blue-400   { border-left-color: #60a5fa !important; }
.border-l-yellow-400 { border-left-color: #fbbf24 !important; }

/* Texto de categoria: ajuste dark (mais vibrante em fundo escuro) */
[data-theme="dark"] .text-blue-700   { color: #93c5fd !important; }
[data-theme="dark"] .text-yellow-700 { color: #fbbf24 !important; }

/* ── Elementos UI cinza — dark ────────────── */

[data-theme="dark"] .btn-secondary {
  background-color: rgba(255,255,255,0.07) !important;
  color: var(--text-muted) !important;
}
[data-theme="dark"] .hover\:bg-gray-200:hover {
  background-color: rgba(255,255,255,0.11) !important;
}

[data-theme="dark"] .btn-outline {
  border-color: var(--border-strong) !important;
  background-color: rgba(255,255,255,0.04) !important;
  color: var(--text-muted) !important;
}
[data-theme="dark"] .hover\:bg-gray-50:hover {
  background-color: rgba(255,255,255,0.07) !important;
}

[data-theme="dark"] .badge-ui {
  background-color: rgba(255,255,255,0.06) !important;
  color: var(--text-muted) !important;
}

/* ── Inputs & forms ─────────────────────── */

/* Foco com teal — ambos os temas */
input:focus, textarea:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--focus-ring) !important;
  border-color: var(--accent-border-mid) !important;
}

/* Input inline do título do grupo */
input.bg-transparent {
  background-color: transparent !important;
  border-color: var(--accent-border-mid) !important;
  color: var(--text) !important;
}

/* Placeholder — ambos os temas (usa var que adapta por tema) */
input::placeholder,
textarea::placeholder {
  color: var(--text-dim) !important;
  opacity: 1;
}

/* Dark: fundo e placeholder dos inputs */
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="email"],
[data-theme="dark"] input[type="password"],
[data-theme="dark"] input[type="number"],
[data-theme="dark"] textarea {
  background-color: rgba(255,255,255,0.04) !important;
  color: var(--text) !important;
  border-color: var(--border-strong) !important;
}

[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
  color: var(--text-dim) !important;
  opacity: 1;
}

[data-theme="dark"] input:focus,
[data-theme="dark"] textarea:focus {
  background-color: rgba(255,255,255,0.06) !important;
}

/* ── Shadows ──────────────────────────────── */

[data-theme="dark"] .shadow-sm {
  box-shadow: 0 1px 3px rgba(0,0,0,0.4), 0 1px 2px rgba(0,0,0,0.3) !important;
}

/* ── UI3.1 — Flash messages ───────────────── */

@keyframes flash-slide-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0);    }
}

[data-flash] .rounded-md {
  backdrop-filter: blur(4px);
  animation: flash-slide-in 0.25s ease forwards;
}

/* ── UI3.2 — Button press feedback ───────── */

button,
input[type="submit"] {
  transition: transform 120ms ease, background-color 150ms ease;
}

button:active,
input[type="submit"]:active {
  transform: scale(0.95);
}

/* ── Accent text utility ──────────────────── */

.text-accent { color: var(--accent) !important; }

/* Ranking #1 badge — âmbar mais escuro no claro, brilhante no escuro */
.text-amber-400 { color: #b45309 !important; }
[data-theme="dark"] .text-amber-400 { color: #fbbf24 !important; }

/* ── Result item ──────────────────────────── */

.result-vote-count {
  font-family: 'Syne', sans-serif;
}

@keyframes result-reveal {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0);    }
}

.result-item {
  opacity: 0;
  animation: result-reveal 0.4s ease forwards;
}

@keyframes bar-grow {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

.result-bar {
  transform-origin: left;
  transform: scaleX(0);
  animation: bar-grow 0.65s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  animation-delay: calc(var(--result-delay, 0ms) + 200ms);
}

/* ── UI3.3 — Board card stagger ──────────── */

@keyframes board-card-reveal {
  from { opacity: 0; transform: translateY(7px); }
  to   { opacity: 1; transform: translateY(0);   }
}

.board-card {
  animation: board-card-reveal 0.28s ease both;
}

/* ── UI4 — Theme toggle button ────────────── */

.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 0.375rem;
  border: 1px solid var(--border-strong);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  flex-shrink: 0;
}

.theme-toggle:hover {
  color: var(--accent);
  border-color: var(--accent-border);
  background-color: var(--accent-bg);
}

/* =============================================
   Landing (home — raiz para visitantes deslogados)
   ============================================= */

/* Entrada suave por seção — escalonada via animation-delay inline */
@keyframes landing-rise {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0);    }
}

.landing-rise {
  opacity: 0;
  animation: landing-rise 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* Cluster de cartões do hero — flutuação contínua e discreta */
@keyframes landing-float {
  0%, 100% { transform: translateY(0);     }
  50%      { transform: translateY(-12px); }
}

.landing-cluster {
  animation: landing-float 7s ease-in-out infinite;
}

/* Cada cartão do mock herda uma leve rotação (--rot) e profundidade */
.landing-mock-card {
  border-left-width: 4px;
  box-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.25);
  transform: rotate(var(--rot, 0deg));
}
[data-theme="dark"] .landing-mock-card {
  box-shadow: 0 12px 34px -10px rgba(0, 0, 0, 0.6);
}

/* Glow de acento atrás do cluster — pinta o protagonista, não compete */
.landing-glow {
  background: radial-gradient(closest-side, var(--accent-bg), transparent);
}

/* Trilho numerado das fases */
.landing-step-num {
  font-family: 'Syne', sans-serif;
  background-color: var(--accent-bg);
  color: var(--accent);
  border: 1px solid var(--accent-border);
}

/* Respeita quem prefere menos movimento */
@media (prefers-reduced-motion: reduce) {
  .landing-rise,
  .landing-cluster {
    animation: none;
  }
  .landing-rise { opacity: 1; }
}

/* ── UI5.1 — Contador de votos fixo ───────── */

.vote-counter-sticky {
  position: fixed;
  top: 4.5rem;
  right: 1.25rem;
  z-index: 40;
  box-shadow: 0 6px 18px -6px rgba(0, 0, 0, 0.25);
}

/* ── UI5.2 — Destaque do card em que votei ── */

.voted-highlight {
  box-shadow: 0 0 0 2px var(--accent-border-mid);
}

/* ── UI5.2 — Foco visível por teclado ─────── */

a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
summary:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--focus-ring);
}