/* ===========================
   Paletas de cores (3 temas)
   =========================== */

/* Tema padrão (Midnight – o seu atual) */
:root,
[data-theme="midnight"]{
  /* Core */
  --bg: #0d1320;
  --surface: #111a2b;
  --text: #e6ebff;
  --muted: #9db0d3;
  --line: #27324a;

  /* Ações/realces */
  --primary: #4da3ff;
  --accent:  #6bd4b1;
  --danger:  #ff6b6b;
  --warning: #ffcf5a;
  --success: #2ecc71;

  /* Inputs/cards */
  --input-bg: #0f1524;
  --card-shadow: 0 6px 22px rgba(0,0,0,.25);
}

/* Ocean (dark azulado mais frio) */
[data-theme="ocean"]{
  --bg: #0a1222;
  --surface: #0f1a30;
  --text: #e7f0ff;
  --muted: #a8b9d6;
  --line: #23314f;

  --primary: #5aa0ff;
  --accent:  #59e0c6;
  --danger:  #ff7373;
  --warning: #ffd46b;
  --success: #3ed38c;

  --input-bg: #0e1630;
  --card-shadow: 0 6px 22px rgba(0,10,30,.28);
}

/* Light (claro) */
[data-theme="light"]{
  --bg: #f6f8fb;
  --surface: #ffffff;
  --text: #101321;
  --muted: #54627a;
  --line: #dbe2ef;

  --primary: #2b6de5;
  --accent:  #0fbf88;
  --danger:  #d64545;
  --warning: #d29b08;
  --success: #17a673;

  --input-bg: #ffffff;
  --card-shadow: 0 6px 18px rgba(16,19,33,.06);
}

/* ===========================
   “Encaixes” no seu layout
   (sobrescreve cores fixas)
   =========================== */

html, body{
  background: var(--bg) !important;
  color: var(--text) !important;
}

.card{
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  box-shadow: var(--card-shadow);
  color: var(--text);
}

input, select, textarea{
  background: var(--input-bg) !important;
  border: 1px solid var(--line) !important;
  color: var(--text) !important;
}

.btn{
  background: var(--primary) !important;
  color: #fff !important;
  border: none !important;
}
.btn.ghost{
  background: transparent !important;
  color: var(--text) !important;
  border: 1px solid var(--line) !important;
}
a{ color: var(--primary); }

/* badges / frases de apoio */
.badge{ background: var(--line); color: var(--text); }

/* seletor de tema (estilos mínimos) */
.theme-picker-backdrop{
  position: fixed; inset: 0; background: rgba(0,0,0,.45);
  display: none; align-items: center; justify-content: center; z-index: 9999;
}
.theme-picker{ width: min(720px,92vw); background: var(--surface);
  color: var(--text); border: 1px solid var(--line); border-radius: 14px; padding: 16px;
  box-shadow: var(--card-shadow); 
}
.theme-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 8px; }
.theme-opt{ border: 1px solid var(--line); border-radius: 12px; padding: 12px; cursor: pointer;
  background: var(--input-bg);
}
.theme-opt .swatch{ height: 56px; border-radius: 10px; margin-bottom: 8px; }
.theme-opt h4{ margin: 0 0 2px; }
.theme-opt small{ color: var(--muted); }
.theme-opt:hover{ outline: 2px solid var(--primary); outline-offset: 2px; }

/* botão flutuante para trocar depois */
#themeFab{
  position: fixed; right: 14px; bottom: 18px; z-index: 9998;
  border: 1px solid var(--line); background: var(--surface); color: var(--text);
  border-radius: 999px; padding: 10px 12px; box-shadow: var(--card-shadow); cursor: pointer;
}