/* Temas do CapriCar. Este arquivo é carregado por último.

   Só os tokens são redefinidos aqui - nenhum componente ganha override
   por tema. O tema claro é o :root de css/variables.css; o escuro
   troca apenas as cores (escalas de raio, tipografia e movimento são
   as mesmas). Se um componente parecer errado em um dos temas, o
   conserto é trocar a cor solta dele por um token, não acrescentar
   uma regra html[data-theme] aqui. */
:root[data-theme="dark"]{
  color-scheme:dark;

  --bg-1:#111317;
  --surface:#181b20;
  --surface-solid:#181b20;
  --surface-2:#1e2228;
  --surface-hover:#252a31;
  --surface-sunken:#14171b;
  --border:#2b3038;
  --border-strong:#3b424c;

  --text:#e7e9ec;
  --text-muted:#a2a9b3;
  --text-subtle:#868e99;
  --on-primary:#ffffff;

  /* Azul Principal clareado só o suficiente para destacar do fundo
     escuro mantendo texto branco legível (6.0:1). O acento de texto
     usa o Azul Claro oficial da marca (#6CACE4). */
  --primary:#2a5bd7;
  --primary-hover:#3868e0;
  --primary-strong:#1e46b0;
  --primary-soft:rgba(108,172,228,.10);
  --primary-soft-strong:rgba(108,172,228,.18);
  --accent:#6cace4;
  --focus-ring:rgba(108,172,228,.45);

  --info:#6cace4;
  --info-text:#b3d3f1;
  --info-surface:rgba(108,172,228,.10);
  --info-border:rgba(108,172,228,.30);

  --success:#4aa77a;
  --success-text:#93d2b1;
  --success-surface:rgba(74,167,122,.11);
  --success-border:rgba(74,167,122,.32);

  --warning:#d4a24a;
  --warning-text:#e8c889;
  --warning-surface:rgba(212,162,74,.11);
  --warning-border:rgba(212,162,74,.32);

  --danger:#e06a6a;
  --danger-text:#f2abab;
  --danger-surface:rgba(224,106,106,.11);
  --danger-border:rgba(224,106,106,.34);
  --danger-solid:#c23b3b;
  --danger-solid-hover:#d14848;

  --neutral-surface:#22262c;
  --neutral-border:#343a42;
  --neutral-text:#c3c8cf;

  --overlay:rgba(0,0,0,.6);

  --shadow-sm:0 1px 2px rgba(0,0,0,.30);
  --shadow-md:0 4px 12px rgba(0,0,0,.35),0 1px 3px rgba(0,0,0,.25);
  --shadow-lg:0 16px 40px rgba(0,0,0,.50),0 2px 6px rgba(0,0,0,.30);
}

/* ============ Botão de alternar tema ============ */
.theme-toggle{
  display:grid;
  place-items:center;
  width:40px;
  height:40px;
  flex:0 0 40px;
  padding:0;
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  background:var(--surface);
  color:var(--text-muted);
  cursor:pointer;
  transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease),color var(--dur) var(--ease);
}

.theme-toggle:hover{
  border-color:var(--border-strong);
  background:var(--surface-hover);
  color:var(--text);
}

.theme-icon{
  width:20px;
  height:20px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}

:root[data-theme="dark"] .theme-icon-moon,
:root[data-theme="light"] .theme-icon-sun{
  display:none;
}

.theme-toggle-login{
  position:fixed;
  z-index:20;
  top:max(16px,env(safe-area-inset-top,0px));
  right:16px;
}

.header-right{
  gap:8px;
}

@media (max-width:480px){
  .theme-toggle-login{
    top:max(12px,env(safe-area-inset-top,0px));
    right:12px;
  }
}