/* ====== TOKENS GERAIS ====== */
:root{
  --bg:#0f172a;
  --bg-elev:#111a2e;
  --text:#e6eaf2;
  --muted:#9aa3b2;
  --border:#1f2a44;
  --brand:#0a2a6b;
  --brand-contrast:#eaf2ff;
  --accent:#f0a500;
  --success:#22c55e;
  --warning:#f59e0b;
  --danger:#ef4444;

  /* mapeamento Bootstrap */
  --bs-body-bg:var(--bg);
  --bs-body-color:var(--text);
  --bs-primary:var(--brand);
  --bs-secondary:#8892a6;
  --bs-link-color:var(--brand-contrast);
  --bs-link-hover-color:#bcd3ff;
  --bs-border-color:var(--border);
  --bs-card-bg:var(--bg-elev);
}

/* Temas */
.theme-dark{
  --bg:#0b1220;
  --bg-elev:#111a2c;
  --text:#e6eaf2;
  --muted:#95a0b5;
  --border:#1c2740;
  --brand:#0a2a6b;
  --brand-contrast:#eaf2ff;
  --accent:#f0a500;
}
.theme-gray{
  --bg:#0e0f12;
  --bg-elev:#14161b;
  --text:#e8e9ec;
  --muted:#a9adb6;
  --border:#242832;
  --brand:#8a8f98;
  --brand-contrast:#0e0f12;
  --accent:#60a5fa;
}
.theme-light{
  --bg:#f8fafc;
  --bg-elev:#ffffff;
  --text:#111827;
  --muted:#6b7280;
  --border:#e5e7eb;
  --brand:#0a2a6b;
  --brand-contrast:#ffffff;
  --accent:#d97706;
}

/* ====== BASE ====== */
body{background-color:var(--bg);color:var(--text)}
.bg-surface{background:var(--bg-elev)}
.text-muted-2{color:var(--muted)}
.border-token{border-color:var(--border)}
a{color:var(--bs-link-color)} a:hover{color:var(--bs-link-hover-color)}

.navbar,.card,.dropdown-menu,.modal-content{
  background:var(--bg-elev);
  color:var(--text);
  border-color:var(--border);
}

/* ====== BOTÕES ====== */
.btn-primary{
  --bs-btn-bg:var(--brand);
  --bs-btn-border-color:var(--brand);
  --bs-btn-hover-bg:color-mix(in oklab,var(--brand),#000 12%);
  --bs-btn-hover-border-color:color-mix(in oklab,var(--brand),#000 12%);
  --bs-btn-active-bg:color-mix(in oklab,var(--brand),#000 18%);
  --bs-btn-active-border-color:color-mix(in oklab,var(--brand),#000 18%);
}

.btn-outline-secondary{
  color:var(--text);
  border-color:var(--border);
}
.btn-outline-secondary:hover{
  color:var(--text);
  background:color-mix(in oklab,var(--bg-elev),#fff 6%);
  border-color:color-mix(in oklab,var(--border),#fff 12%);
}

.btn-outline-danger{color:#fca5a5;border-color:#f87171}
.btn-outline-danger:hover{color:#fff;background:#ef4444;border-color:#ef4444}

/* Links tipo botão */
.btn-link{color:var(--bs-link-color)}
.btn-link:hover{color:var(--bs-link-hover-color)}

/* ====== FORM CONTROLS ====== */
.form-control,.form-select{
  background-color:var(--bg);
  color:var(--text);
  border-color:var(--border);
}
.form-control::placeholder{color:var(--muted)}
.form-control:focus,.form-select:focus{
  border-color:color-mix(in oklab,var(--brand),#fff 20%);
  box-shadow:0 0 0 .2rem rgba(59,130,246,.15);
}

/* Input file (nativo) – fundo e hover escuros */
input[type="file"]{
  color:var(--text);
  background:var(--bg);
  border-color:var(--border);
}
input[type="file"]::file-selector-button,
input[type="file"]::-webkit-file-upload-button{
  background:var(--bg-elev);
  color:var(--text);
  border:1px solid var(--border);
  border-radius:.5rem;
  padding:.375rem .75rem;
  margin-right:.75rem;
  cursor:pointer;
}
input[type="file"]::file-selector-button:hover,
input[type="file"]::-webkit-file-upload-button:hover{
  background:color-mix(in oklab,var(--bg-elev),#fff 4%);
  color:var(--text);
  border-color:color-mix(in oklab,var(--border),#fff 10%);
}

/* Dropdown items legíveis em qualquer tema */
.dropdown-menu .dropdown-item{color:var(--text)}
.dropdown-menu .dropdown-item:hover{background:color-mix(in oklab,var(--bg-elev),#fff 6%);color:var(--text)}

/* ====== WALLPAPER UNIVERSO (apenas DARK) ====== */
.theme-dark .universe-bg{
  background-color:var(--bg);
  background-image:
    radial-gradient(1200px 600px at 10% -20%, rgba(10,42,107,.28), transparent 60%),
    radial-gradient(900px 500px at 90% -10%, rgba(59,130,246,.16), transparent 60%),
    linear-gradient(180deg, rgba(10,16,28,0.96), rgba(10,16,28,0.96));
  position:relative;
}
.theme-dark .universe-bg::before{
  content:"";
  position:absolute; inset:0; pointer-events:none; opacity:.8;
  background-image:
    radial-gradient(2px 2px at 20% 30%, rgba(240,165,0,.8), transparent 60%),
    radial-gradient(1.5px 1.5px at 60% 10%, rgba(234,242,255,.9), transparent 60%),
    radial-gradient(1.5px 1.5px at 80% 40%, rgba(234,242,255,.7), transparent 60%),
    radial-gradient(1.8px 1.8px at 30% 70%, rgba(240,165,0,.5), transparent 60%),
    radial-gradient(1.2px 1.2px at 75% 75%, rgba(234,242,255,.6), transparent 60%);
  animation:twinkle 6s linear infinite alternate;
}
@keyframes twinkle{to{opacity:.4}}
/* DEBUG: remova depois */
body::after{
  content:"tokens loaded ✓";
  position:fixed; right:8px; bottom:8px;
  font-size:10px; color:#f0a500; opacity:.35; pointer-events:none;
}
/* Universo só no tema escuro */
.theme-dark .universe-bg{
  background-color: var(--bg) !important;
  background-image:
    radial-gradient(1200px 600px at 10% -20%, rgba(10,42,107,.28), transparent 60%),
    radial-gradient(900px 500px at 90% -10%, rgba(59,130,246,.16), transparent 60%),
    linear-gradient(180deg, rgba(10,16,28,0.96), rgba(10,16,28,0.96)) !important;
  position: relative;
}
.theme-dark .universe-bg::before{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.8;
  background-image:
    radial-gradient(2px 2px at 20% 30%, rgba(240,165,0,.8), transparent 60%),
    radial-gradient(1.5px 1.5px at 60% 10%, rgba(234,242,255,.9), transparent 60%),
    radial-gradient(1.5px 1.5px at 80% 40%, rgba(234,242,255,.7), transparent 60%),
    radial-gradient(1.8px 1.8px at 30% 70%, rgba(240,165,0,.5), transparent 60%),
    radial-gradient(1.2px 1.2px at 75% 75%, rgba(234,242,255,.6), transparent 60%) !important;
  animation: twinkle 6s linear infinite alternate;
}
@keyframes twinkle { to { opacity:.4 } }
/* Input file escuro + hover escuro */
input[type="file"]{
  color: var(--text) !important;
  background: var(--bg) !important;
  border-color: var(--border) !important;
}
input[type="file"]::file-selector-button,
input[type="file"]::-webkit-file-upload-button{
  background: var(--bg-elev) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
  border-radius: .5rem;
  padding: .375rem .75rem;
  margin-right: .75rem;
  cursor: pointer;
}
input[type="file"]::file-selector-button:hover,
input[type="file"]::-webkit-file-upload-button:hover{
  background: color-mix(in oklab, var(--bg-elev), #fff 4%) !important;
  color: var(--text) !important;
  border-color: color-mix(in oklab, var(--border), #fff 10%) !important;
}
/* ===== Universe background (dark only) ===== */
:root{
  /* default image (pode ser .jpg/.png também) */
  --universe-img: url("/public/images/bg/litverso-starfield.webp");
}

.theme-dark .universe-img{
  position: relative;
  /* imagem + véu escuro pra legibilidade */
  background-image:
    linear-gradient(180deg, rgba(8,12,24,.90), rgba(8,12,24,.94)),
    var(--universe-img);
  background-color: var(--bg);
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
}

/* leve color grading e “estrelas” extras */
.theme-dark .universe-img::before{
  content:"";
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(60% 40% at 50% 0%, rgba(59,130,246,.14), transparent 70%),
    radial-gradient(35% 25% at 85% 10%, rgba(240,165,0,.06), transparent 70%);
  mix-blend-mode: screen;
  opacity:.9;
}

/* Variações (trocam a fonte da imagem por classe) */
.theme-dark .universe-img.nebula{ --universe-img: url("/public/images/bg/litverso-nebula.webp"); }
.theme-dark .universe-img.hyperspace{ --universe-img: url("/public/images/bg/litverso-hyperspace.webp"); }

/* Evita jank em mobile (desabilita parallax fixo) */
@media (min-width: 992px){
  .theme-dark .universe-img{ background-attachment: fixed; }
}

/* File input sempre escuro, inclusive no hover (reforço) */
input[type="file"]{
  color: var(--text) !important;
  background: var(--bg) !important;
  border-color: var(--border) !important;
}
input[type="file"]::file-selector-button,
input[type="file"]::-webkit-file-upload-button{
  background: var(--bg-elev) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
  border-radius: .5rem;
  padding: .375rem .75rem;
  margin-right: .75rem;
  cursor: pointer;
}
input[type="file"]::file-selector-button:hover,
input[type="file"]::-webkit-file-upload-button:hover{
  background: color-mix(in oklab, var(--bg-elev), #fff 4%) !important;
  color: var(--text) !important;
  border-color: color-mix(in oklab, var(--border), #fff 10%) !important;
}