/* ==========================================================
   BrainTest 3.2.1 — Tema Global (Paleta IDENTICA à descrita)
   Tema Escuro → tons #0D0D0E, #1A1A1C, #1E1E20, #2A2A2D
   Tema Claro → #F7F7F8, #FFFFFF, #F4F4F5, #E5E7EB
   Acentos → gradiente rosa #F6A4C3 → #E87BAA
   ========================================================== */

/* ===============================
   🌞 LIGHT MODE — ChatGPT Style
   =============================== */

:root {
  /* Fundo e superfícies */
  --color-bg: #F7F7F8;              /* fundo geral */
  --color-card: #FFFFFF;            /* cards principais */
  --color-card-alt: #F4F4F5;        /* níveis internos */
  --color-border: #E5E7EB;          /* divisores */

  /* Texto */
  --color-text: #0D0D0E;            /* texto principal */
  --color-text-secondary: #3F3F46;  /* texto secundário */
  --color-muted: #6B7280;           /* texto muted */

  /* Acentos rosa (mais vivos no light mode) */
  --color-primary: #993b66;          /* rosa principal */
  --color-secondary: #F6A4C3;       /* rosa claro pastel */

  /* Hover suave */
  --hover-soft: rgba(0, 0, 0, 0.06);

  /* Inputs */
  --color-input-bg: #FFFFFF;
  --color-input-border: #E5E7EB;
  --color-input-placeholder: #6B7280;

  --shadow-soft: 0 16px 40px rgba(0, 0, 0, 0.05);
  --radius: 12px;

  --transition-theme:
    background-color 0.25s ease,
    color 0.25s ease,
    box-shadow 0.25s ease,
    border-color 0.25s ease;
}

/* ===============================
   🌙 DARK MODE — ChatGPT Style
   =============================== */

[data-theme="dark"] {
  /* Fundo e superfícies */
  --color-bg: #212121;                 /* fundo geral */
  --color-card: #181818;               /* surface principal */
  --color-card-alt: #1E1E20;           /* cards internos */
  --color-border: #3A3A3D;             /* borda suave */
  --color-border-soft: rgba(255,255,255,0.08);

  /* Texto */
  --color-text: #FFFFFF;               /* principal */
  --color-text-secondary: #E5E5E7;     /* secundário */
  --color-muted: #A1A1A8;              /* muted */

  /* Acentos rosa desaturado */
  --color-primary: #993b66;            /* rosa claro pastel */
  --color-secondary: #E87BAA;          /* rosa médio suave */

  /* Hover suave */
  --hover-soft: rgba(255, 255, 255, 0.12);

  /* Inputs */
  --color-input-bg: #1E1E20;
  --color-input-border: rgba(255,255,255,0.15);
  --color-input-placeholder: #A1A1A8;

  --shadow-soft: 0 18px 45px rgba(0, 0, 0, 0.55);
}

/* ===============================
   🌐 APLICAÇÃO GLOBAL
   =============================== */

body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: "Inter", system-ui, sans-serif;
  transition: var(--transition-theme);
}

/* Cartões e superfícies */
.card,
.test-body,
.question-box,
.report-section,
.report-summary,
.sidebar,
.login-card,
.page-container,
.dashboard-container,
.history-card,
.widget,
.test-card,
.benefit-card,
.modal,
.modal-content {
  background: var(--color-card);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  transition: var(--transition-theme);
}

/* Sidebar item ativo */
.sidebar .menu-item.active {
  background: rgba(246, 164, 195, 0.18);
  color: var(--color-primary);
}

/* Hover geral */
.menu-item:hover,
.button:hover,
a:hover {
  background: var(--hover-soft);
}

/* ===============================
   🔘 Botões — Rosa ChatGPT
   =============================== */
.btn,
button.primary,
button[type="submit"] {
  background: linear-gradient(130deg, var(--color-primary), var(--color-secondary));
  border: none;
  color: #FFFFFF;
  padding: 0.75rem 1.25rem;
  border-radius: 999px;
  font-weight: 600;
  cursor: pointer;
  background-size: 200% 200%;
  transition:
    background-position 0.25s ease,
    box-shadow 0.25s ease,
    transform 0.16s ease;
}

.btn:hover,
button.primary:hover {
  background-position: 100% 0;
  box-shadow: 0 7px 24px rgba(232, 135, 170, 0.45);
  transform: translateY(-2px);
}

/* Botão secundário */
.btn-secondary {
  background: transparent;
  border: 1px solid var(--color-border);
  color: var(--color-text-secondary);
}

/* ===============================
   ✏️ Inputs
   =============================== */
input,
select,
textarea {
  background: var(--color-input-bg);
  color: var(--color-text);
  border: 1px solid var(--color-input-border);
  padding: 0.6rem 0.8rem;
  border-radius: 10px;
  outline: none;
  font-size: 0.92rem;
}

input::placeholder,
textarea::placeholder {
  color: var(--color-input-placeholder);
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 1px var(--color-primary);
}

/* ===============================
   🔠 Tipografia
   =============================== */

h1, h2, h3, h4 {
  color: var(--color-text);
}

p, span, label {
  color: var(--color-text-secondary);
}

/* ===============================
   🎯 Ajustes específicos para MODAIS
   =============================== */

.modal input,
.modal select,
.modal textarea {
  background: var(--color-card);
  color: var(--color-text);
  border: 1px solid var(--color-border);
}

/* Placeholder legível dentro de modais */
.modal input::placeholder,
.modal textarea::placeholder {
  color: var(--color-input-placeholder);
  opacity: 1;
}

/* ===============================
   🔧 Transição suave
   =============================== */

*,
*::before,
*::after {
  transition:
    background-color 0.25s ease,
    color 0.25s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease;
}