/* ==========================================================================
   THEME TOKENS — fonte única de verdade para as cores do site.
   Qualquer cor de "sistema" (fundo, texto, bordas, destaque, sombras,
   overlays) deve ser lida daqui via var(--nome-do-token), nunca escrita
   como hex/rgb solto em outro arquivo .css.

   Para trocar a paleta do site inteiro, basta editar os valores abaixo.
   Para adicionar um 3º tema, duplique o bloco [data-theme="light"],
   dê um novo nome (ex: [data-theme="sepia"]) e adicione a opção no
   toggle (fragments/navbar.ejs + default-behavior.ejs).

   --color-*-rgb são os componentes R G B (sem vírgula) do token cheio,
   só pra poder aplicar opacidade com rgb(var(--x-rgb) / 0.5) em vez de
   cadastrar uma cor translúcida fixa (--color-border-soft e os overlays
   usam esse truque).
   ========================================================================== */

:root {
  /* Curva "com molinha" pra hover/click de elementos pequenos (badges,
     botões, ícones) — dá uma sensação de "pop" em vez de só esvaecer
     a cor. Timings ficam com cada regra, só a curva é compartilhada. */
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ---- Tema escuro (padrão do site) — paleta em teste ---- */
  color-scheme: dark;

  --color-bg: #212528;
  --color-bg-rgb: 33 37 40;
  --color-bg-elevated: #272b2e;
  --color-bg-elevated-soft: #2a2e31;
  --color-bg-deep: #1d2124;
  --color-bg-deep-rgb: 29 33 36;
  --color-bg-content: #f5f5f5;

  --color-text: #f5f7fb;
  --color-text-rgb: 245 247 251;
  --color-text-strong: #ffffff;
  --color-text-muted: #8f9aa7;
  --color-text-on-content: #173222;

  --color-border-strong: #363b40;
  --color-border-rgb: 54 59 64;
  --color-border-soft: rgb(var(--color-border-rgb) / 0.5);

  --color-accent: #34d089;
  --color-accent-strong: #5fe0a8;

  --color-danger: #f45b69;
  --color-warning: #f4d03f;
  --color-success: #34d089;

  --color-overlay: rgb(var(--color-text-rgb) / 0.08);
  --color-overlay-strong: rgb(var(--color-text-rgb) / 0.16);

  --shadow-color: rgba(0, 0, 0, 0.3);
  --shadow-color-soft: rgba(17, 17, 26, 0.1);

  /* Painel sólido do topbar quando "sticky" (rolado) e de dropdowns —
     usa o tom "deep" da paleta pra dar profundidade em vez de só
     escurecer o próprio --color-bg */
  --navbar-bg-scrolled: rgb(var(--color-bg-deep-rgb) / 0.92);
  --navbar-blur: 8px;

  /* Elementos que propositalmente NÃO mudam com o tema (identidade visual
     fixa, como blocos de código e o botão flutuante) */
  --code-bg: #272822;
  --code-text: #f8f8f2;
  --fab-bg: #212529;
  --fab-bg-panel: #222222;
  --fab-text: #ffffff;
  --scrim: rgba(0, 0, 0, 0.4);
  /* Cinza do efeito "papel empilhado" atrás do card de post (sempre um
     pouco mais escuro que --color-bg-content, que é sempre claro) */
  --paper-shadow: #dcdcdc;

  /* Aliases legados — mantidos para não quebrar CSS existente que já
     usava var(--bg-color) / var(--bg-content-color) */
  --bg-color: var(--color-bg);
  --bg-content-color: var(--color-bg-content);
}

/* O tema escuro definido em :root acima é o padrão do site — ele NÃO
   muda sozinho com a preferência do sistema operacional, só quando o
   usuário escolhe explicitamente pelo botão de tema (persistido em
   localStorage, ver head.ejs e scripts/default-behavior.ejs). Isso
   preserva a identidade visual atual do site para quem nunca mexeu
   no toggle. */
[data-theme="light"] {
  color-scheme: light;

  --color-bg: #e7f3ec;
  --color-bg-rgb: 231 243 236;
  --color-bg-elevated: #d5eadb;
  --color-bg-elevated-soft: #eff8f1;
  --color-bg-deep: #bfdac7;
  --color-bg-deep-rgb: 191 218 199;
  --color-bg-content: #eff8f1;

  --color-text: #173222;
  --color-text-rgb: 23 50 34;
  --color-text-strong: #173222;
  --color-text-muted: #3b6a4d;
  --color-text-on-content: #173222;

  --color-border-strong: #8fbfa1;
  --color-border-rgb: 143 191 161;
  --color-border-soft: rgb(var(--color-border-rgb) / 0.5);

  --color-accent: #1f9254;
  --color-accent-strong: #17753f;

  --color-danger: #c84545;
  --color-warning: #d5a100;
  --color-success: #1f9254;

  --color-overlay: rgb(var(--color-text-rgb) / 0.06);
  --color-overlay-strong: rgb(var(--color-text-rgb) / 0.12);

  --shadow-color: rgba(20, 30, 35, 0.18);
  --shadow-color-soft: rgba(20, 30, 35, 0.08);

  --navbar-bg-scrolled: rgb(var(--color-bg-deep-rgb) / 0.85);
}

[data-theme="dark"] {
  color-scheme: dark;

  --color-bg: #212528;
  --color-bg-rgb: 33 37 40;
  /* --color-bg-elevated: #272b2e; */
  --color-bg-elevated: rgb(50, 50, 50);
  --color-bg-elevated-soft: #2a2e31;
  --color-bg-deep: #1d2124;
  --color-bg-deep-rgb: 29 33 36;
  --color-bg-content: #f5f5f5;

  --color-text: #f5f7fb;
  --color-text-rgb: 245 247 251;
  /* --color-text-strong: #ffffff; */
  --color-text-strong: rgb(245 247 251);
  --color-text-muted: #8f9aa7;
  --color-text-on-content: #173222;
  /* --color-text-on-content: rgb(245 247 251); */

  --color-border-strong: #363b40;
  --color-border-rgb: 54 59 64;
  --color-border-soft: rgb(var(--color-border-rgb) / 0.5);

  --color-accent: #34d089;
  --color-accent-strong: #5fe0a8;

  --color-danger: #f45b69;
  --color-warning: #f4d03f;
  --color-success: #34d089;

  --color-overlay: rgb(var(--color-text-rgb) / 0.08);
  --color-overlay-strong: rgb(var(--color-text-rgb) / 0.16);

  --shadow-color: rgba(0, 0, 0, 0.3);
  --shadow-color-soft: rgba(17, 17, 26, 0.1);

  --navbar-bg-scrolled: rgb(var(--color-bg-deep-rgb) / 0.92);
}

body {
  transition: background-color 0.25s ease, color 0.25s ease;
}

/* Utilitários pra trocar `style="color: whitesmoke"` etc. inline por uma
   classe que acompanha o tema. Use no lugar de cor fixa em templates. */
.text-on-bg {
  color: var(--color-text-strong);
}

.text-on-surface {
  color: var(--color-text-on-content);
}

/* Texto "apagado" dentro de um painel claro (--color-bg-content) — troca
   pro `.text-muted` do Bootstrap, que é um cinza fixo e nunca acompanha
   o tema. */
.text-muted-surface {
  color: var(--color-text-on-content);
  opacity: 0.65;
}

/* Mesma ideia, mas pra texto em cima de uma superfície "elevada" que
   muda de clara pra escura com o tema (--color-bg-elevated/-deep, ex: o
   card de posts) — usa --color-text em vez de --color-text-on-content,
   que é fixo e só funciona sobre o "papel" sempre-claro. */
.text-muted-elevated {
  color: var(--color-text);
  opacity: 0.65;
}

/* ---- Botão de alternância de tema ---- */
.theme_toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 50%;
  border: none;
  background: var(--color-overlay);
  color: var(--color-text-strong);
  cursor: pointer;
  font-size: 1rem;
  transition: background 0.2s ease, transform 0.3s var(--ease-bounce);
  flex: none;
}

.theme_toggle:hover {
  background: var(--color-overlay-strong);
  transform: rotate(15deg) scale(1.1);
}

.theme_toggle:active {
  transform: rotate(15deg) scale(0.92);
}

.theme_toggle .fa-sun {
  display: none;
}

[data-theme="light"] .theme_toggle .fa-sun {
  display: inline-block;
}

[data-theme="light"] .theme_toggle .fa-moon {
  display: none;
}

/* Quem pediu pro sistema operacional reduzir animações não deveria levar
   "pop"/bounce em cima — desliga toda transição/animação do site, não só
   as de movimento (é o que a maioria dos navegadores recomenda). */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}