/* =====================================================================
   user.tecsaconstrutora.com.br — TEMA ESCURO "TECSA Deep Navy"
   Extensao do Precision Craft (que e light-only por padrao) a pedido.
   Identidade preservada: azul TECSA clareado no MESMO tom (#5194D6),
   dourado mantido, contraste WCAG AA verificado. Paleta sintetizada por
   painel de design (deep-navy vs grafite -> deep-navy venceu).

   Arquitetura: o tema light usa tokens via var(); aqui sobrescrevemos os
   tokens sob [data-theme="dark"] + alguns ajustes de superficie, porque
   --tecsa-white e sobrecarregado (fundo da pagina E "texto sobre cor").
   ===================================================================== */

[data-theme="dark"] {
  /* --- tokens da marca, variante escura --- */
  --tecsa-blue:        #5194D6;   /* azul da marca clareado no mesmo matiz (~210deg) */
  --tecsa-blue-light:  #16223A;   /* fundo azul suave (hover de botao secundario) */
  --tecsa-blue-medium: #6AA3DC;   /* hover do azul */
  --tecsa-gray:        #9BA6B8;   /* texto secundario (7.6:1) */
  --tecsa-gray-light:  #0F1626;   /* preenchimentos sutis (pill group, dot bg) */
  --tecsa-gray-medium: #2C3650;   /* bordas de enfase / separadores */
  --tecsa-black:       #E8ECF3;   /* texto principal (15.8:1) */
  --tecsa-white:       #0B1220;   /* fundo da pagina + texto navy sobre cor (botao) */
  --tecsa-gold:        #D4B978;   /* dourado preservado (9.8:1) */
  --tecsa-gold-light:  #2A2414;   /* fundo translucido de badge dourado */
  --tecsa-border:      #202A3D;   /* hairline 1px sutil */

  /* glyphs de categoria um pouco mais presentes sobre superficie escura */
  --c-blue-soft:    rgba(59, 130, 246, 0.18);
  --c-emerald-soft: rgba(16, 185, 129, 0.18);
  --c-amber-soft:   rgba(245, 158, 11, 0.18);
  --c-violet-soft:  rgba(139, 92, 246, 0.18);
  --c-pink-soft:    rgba(236, 72, 153, 0.18);
  --c-sky-soft:     rgba(14, 165, 233, 0.18);
  --c-cyan-soft:    rgba(6, 182, 212, 0.18);
  --c-slate-soft:   rgba(148, 163, 184, 0.18);
  --c-red-soft:     rgba(239, 68, 68, 0.18);
  --c-gray-soft:    rgba(148, 163, 184, 0.16);
}

/* --- superficies em camadas (page < nav < controles ~ cards) --- */
[data-theme="dark"] .top-nav        { background: #0F1626; }
[data-theme="dark"] .product-card,
[data-theme="dark"] .tool-card      { background: #121A2B; }
[data-theme="dark"] .user-chip,
[data-theme="dark"] .theme-toggle   { background: #131B2C; }
[data-theme="dark"] .footer-minimal { background: #0B1220; }

/* --- sombras densas para fundo escuro (a luz nao "quica") --- */
[data-theme="dark"] .product-card:hover { box-shadow: 0 1px 3px rgba(0,0,0,0.55), 0 10px 28px rgba(0,0,0,0.45); }
[data-theme="dark"] .tool-card:hover    { box-shadow: 0 1px 3px rgba(0,0,0,0.55), 0 14px 34px rgba(0,0,0,0.50); }

/* --- kicker/badge dourado mais nitido --- */
[data-theme="dark"] .badge.setor { color: #D8BE82; }

/* --- selecao de texto coerente com o tema --- */
[data-theme="dark"] ::selection { background: #1E2C44; color: #E8ECF3; }

/* =====================================================================
   BOTAO DE TEMA (sol / lua) — Precision Craft
   ===================================================================== */
.theme-toggle {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  background: var(--tecsa-white);
  border: 1px solid var(--tecsa-border);
  border-radius: var(--r-md);
  color: var(--tecsa-gray);
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color var(--d-fast) var(--ease-precision),
              color var(--d-fast) var(--ease-precision),
              background-color var(--d-fast) var(--ease-precision);
}
.theme-toggle:hover { border-color: var(--tecsa-gray-medium); color: var(--tecsa-blue); }
.theme-toggle:focus-visible { outline: 2px solid var(--tecsa-blue); outline-offset: 2px; }
.theme-toggle svg { width: 17px; height: 17px; stroke-width: 2; }

/* light -> mostra lua (acao: ir pro escuro) | dark -> mostra sol */
.theme-toggle .icon-sun { display: none; }
[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
[data-theme="dark"] .theme-toggle .icon-sun  { display: block; }

/* =====================================================================
   TRANSICAO SUAVE só durante a troca (sem flash no load)
   ===================================================================== */
html.theme-switching,
html.theme-switching *,
html.theme-switching *::before,
html.theme-switching *::after {
  transition: background-color 0.35s var(--ease-precision),
              color 0.35s var(--ease-precision),
              border-color 0.35s var(--ease-precision),
              fill 0.35s var(--ease-precision),
              box-shadow 0.35s var(--ease-precision) !important;
}