/* Modo noturno: troca os tokens e corrige cores fixas. Ativado por html[data-theme="dark"] (assets/js/tema.js) */
html[data-theme="dark"] {
  color-scheme: dark;
  --white: #121212;   /* fundo */
  --ink: #ededed;     /* texto */
  --gray-100: #1c1c1c;
  --gray-200: #2c2c2c;
  --gray-400: #808080; /* contraste ≥ 4.5 sobre o fundo */
  --gray-500: #a6a6a6;
}

/* headers translúcidos */
@media (max-width: 767px) {
  html[data-theme="dark"] header.top-header { background: rgba(18,18,18,.96); }
  html[data-theme="dark"] header.top-header.menu-open { background: var(--white); }
}
html[data-theme="dark"] body.project-page > header.top-header,
html[data-theme="dark"] body.project-page .dk-top { background: rgba(18,18,18,.97); }
html[data-theme="dark"] .mobile-top-button { background: rgba(28,28,28,.9); border-color: rgba(255,255,255,.14); }

/* logos da faixa: cinza claro no escuro; cor original no hover */
html[data-theme="dark"] .marquee-logo img {
  filter: grayscale(var(--g, 1)) invert(calc(.88 * var(--g, 1))) contrast(calc(1 + 0.3 * var(--g, 1)));
}

/* bloco escuro dos serviços continua escuro (ink agora é claro) */
html[data-theme="dark"] .sv-menu { background: var(--gray-100); }

/* fundos brancos fixos */
html[data-theme="dark"] .dk-tag,
html[data-theme="dark"] .pg-sort select { background: var(--white); color: var(--ink); }
html[data-theme="dark"] .dk-tag:hover,
html[data-theme="dark"] .dk-tag:focus-visible { background: var(--gray-100); }

/* contadores dentro de filtros ativos (botão claro) */
html[data-theme="dark"] .pc-filter [aria-pressed="true"] span,
html[data-theme="dark"] .pj-filter-extra .art-filter[aria-pressed="true"] .pj-tag-count,
html[data-theme="dark"] .sg-projs .art-filter[aria-pressed="true"] span { color: rgba(0,0,0,.55); }

/* dashboards */
html[data-theme="dark"] .ds-cmp-i { background: color-mix(in srgb, var(--ac) 14%, var(--white)); }
html[data-theme="dark"] .ds-cmp-i b { color: color-mix(in srgb, var(--ac) 65%, #fff); }
html[data-theme="dark"] .ds-mbar i { background: color-mix(in srgb, var(--ac) 55%, var(--white)); }
html[data-theme="dark"] .ds-heat-c.off { background: repeating-linear-gradient(45deg, #1c1c1c 0 3px, #121212 3px 6px); }
html[data-theme="dark"] .ds-heat-c:not(.off):hover { box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--ac); }
html[data-theme="dark"] .ds-bub-i i { box-shadow: 0 0 0 2px var(--white); }

/* --- Ícone pixelado de tema, discreto e alinhado ao nome --- */
.header-left { align-items: center; gap: 12px; }
.theme-switch {
  position: relative; flex: none; width: min(28px, var(--ts, 36px)); height: min(28px, var(--ts, 36px)); padding: 0;
  border: 0; border-radius: 0; background: transparent; box-shadow: none;
  cursor: pointer; -webkit-tap-highlight-color: transparent; color: var(--gray-500);
  transition: color .25s var(--ease), transform .2s var(--ease);
}
.theme-switch:hover { color: var(--ink); transform: translateY(-1px); }
.theme-switch:active { transform: scale(.92); }
.theme-switch:focus-visible { outline: 1px solid var(--gray-500); outline-offset: 3px; }
html[data-theme="dark"] .theme-switch { color: var(--gray-400); background: transparent; box-shadow: none; }
.theme-switch svg {
  position: absolute; top: 50%; left: 50%; width: 20px; height: 20px; margin: -10px 0 0 -10px;
  fill: currentColor; shape-rendering: crispEdges;
  transition: transform .45s cubic-bezier(.34,1.56,.64,1), opacity .25s var(--ease);
}
.theme-switch .ts-sun  { transform: rotate(0) scale(1); opacity: 1; }
.theme-switch .ts-moon { transform: rotate(-90deg) scale(.3); opacity: 0; }
html[data-theme="dark"] .theme-switch .ts-sun  { transform: rotate(90deg) scale(.3); opacity: 0; }
html[data-theme="dark"] .theme-switch .ts-moon { transform: rotate(0) scale(1); opacity: 1; }

/* barra "Site desenhado e desenvolvido por…" (fundo fixo rgba claro no CSS base) */
html[data-theme="dark"] .credit-bar { background: rgba(28,28,28,.96); }
html[data-theme="dark"] .pv-ov { background: rgba(18,18,18,.97); }

/* --- Cabeçalho mobile: nome centralizado; sol/lua e idiomas dentro do menu --- */
.ts-menu { display: none; }
@media (max-width: 767px) {
  /* nome + cidade no centro da tela; padding compensa X + gap */
  header.top-header .header-left { flex: 1; justify-content: center; padding-left: 40px; } /* 24px do X + 16px de gap */
  header.top-header .brand-collapse-inner,
  header.top-header .project-brand { text-align: center; }
  header.top-header .header-left > .theme-switch { display: none; }
  /* Switch vertical no menu: fundo discreto com sol/lua em pixel art. */
  header.top-header .ts-menu {
    --k: 28px;
    display: block; position: absolute; left: var(--gutter);
    top: calc(50% - var(--hdr-h, 56px) / 2 - var(--k) - 3px);
    width: calc(var(--k) + 6px); height: calc(var(--k) * 2 + 6px);
    border: 0; border-radius: 999px;
    background: var(--gray-100);
    box-shadow: inset 0 0 0 1px var(--gray-200);
    opacity: 0; transition: opacity .35s var(--ease) .2s, background .3s var(--ease);
  }
  header.top-header.menu-open .ts-menu { opacity: 1; }
  header.top-header .ts-menu:hover, header.top-header .ts-menu:active { transform: none; }
  html[data-theme="dark"] header.top-header .ts-menu { background: #202020; box-shadow: inset 0 0 0 1px #383838; }
  .ts-menu .ts-knob {
    position: absolute; left: 3px; top: 3px; width: var(--k); height: var(--k);
    border: 0; border-radius: 50%; background: rgba(255,255,255,.78);
    box-shadow: 0 1px 3px rgba(0,0,0,.12);
    transition: transform .55s cubic-bezier(.34,1.56,.64,1), background .3s var(--ease), box-shadow .3s var(--ease);
  }
  html[data-theme="dark"] .ts-menu .ts-knob {
    transform: translateY(var(--k)); background: rgba(255,255,255,.08);
    box-shadow: 0 1px 3px rgba(0,0,0,.28);
  }
  /* bandeiras em coluna, no centro vertical, à direita */
  header.top-header .lang-switch {
    position: absolute; right: var(--gutter); top: calc(50% - var(--hdr-h, 56px) / 2 - 46px); /* 3×20px + 2×16px = 92px */
    flex-direction: column; gap: 16px; margin-top: 0 !important;
  }
}