/* Tema — Curso Fullstack
   Cores do site e dos slides, nos temas escuro e claro, com cara de IDE.
   O tema é escolhido por assets/js/tema.js, que põe data-theme="dark|light" no <html>
   (preferência do aluno: sistema, escuro ou claro; salva no navegador).
   Cada módulo troca só a cor de destaque via [data-mod]: POO = laranja Java, Spring = verde Spring.
   Carregue este arquivo antes de site.css / deck.css / jogo.css. */

/* ---------- escuro (padrão) ---------- */
:root {
  --bg: #0f1115;            /* área do editor */
  --sidebar: #15181d;       /* explorer, topo, rodapé */
  --surface: #181b21;       /* painéis e cartões */
  --surface-2: #20242c;     /* realces, chips, hover */
  --line: #2a2f38;
  --line-2: #3a404b;
  --text: #d6d9df;
  --text-strong: #f3f5f8;
  --muted: #8b929e;

  --accent: #4c9aff;        /* destaque (cada módulo troca) */
  --accent-ink: #06101f;    /* texto sobre o destaque */
  --accent-text: #79b4ff;   /* destaque usado como cor de texto */

  --ok: #3fb950;
  --ok-ink: #04120a;
  --ok-text: #56d364;
  --bad: #f85149;
  --bad-text: #ff7b72;
  --gold: #e3b341;          /* XP */
  --gold-ink: #1a1404;
  --purple: #c792ea;
  --cyan: #56c2d6;

  /* código */
  --code-bg: #0b0d10;
  --code-text: #d6d9df;
  --code-line: #262a31;
  --syn-kw: #c792ea;
  --syn-str: #a5d6a7;
  --syn-num: #f78c6c;
  --syn-com: #858d98;
  --syn-fn: #82aaff;
  --syn-type: #ffcb6b;
  --syn-meta: #7fdbca;

  --overlay: rgba(4, 6, 10, .7);
  --shadow: 0 1px 0 rgba(0, 0, 0, .25);
  --shadow-up: 0 8px 24px rgba(0, 0, 0, .35);
  --radius: 8px;
  --radius-s: 6px;
  color-scheme: dark;
}

/* ---------- claro ---------- */
:root[data-theme="light"] {
  --bg: #ffffff;
  --sidebar: #f6f8fa;
  --surface: #ffffff;
  --surface-2: #f0f2f5;
  --line: #d0d7de;
  --line-2: #b8c0ca;
  --text: #1f2328;
  --text-strong: #0d1117;
  --muted: #59636e;

  --accent: #0969da;
  --accent-ink: #ffffff;
  --accent-text: #0969da;

  --ok: #1a7f37;
  --ok-ink: #ffffff;
  --ok-text: #1a7f37;
  --bad: #cf222e;
  --bad-text: #cf222e;
  --gold: #855900;
  --gold-ink: #ffffff;
  --purple: #8250df;
  --cyan: #0a7d91;

  --code-bg: #f6f8fa;
  --code-text: #1f2328;
  --code-line: #d0d7de;
  --syn-kw: #8250df;
  --syn-str: #0a6b2e;
  --syn-num: #b35900;
  --syn-com: #636c76;
  --syn-fn: #0550ae;
  --syn-type: #953800;
  --syn-meta: #0a7d91;

  --overlay: rgba(31, 35, 40, .45);
  --shadow: 0 1px 0 rgba(31, 35, 40, .04);
  --shadow-up: 0 8px 24px rgba(31, 35, 40, .12);
  color-scheme: light;
}

/* ---------- destaque por módulo ---------- */
[data-mod="poo"]    { --accent: #f0883e; --accent-ink: #1a0e04; --accent-text: #f5a35c; }
[data-mod="spring"] { --accent: #6db33f; --accent-ink: #0b1405; --accent-text: #8cc864; }
:root[data-theme="light"] [data-mod="poo"]    { --accent: #e76f00; --accent-ink: #1a0e04; --accent-text: #b35300; }
:root[data-theme="light"] [data-mod="spring"] { --accent: #6db33f; --accent-ink: #0b1405; --accent-text: #3d7a1f; }

/* ---------- botão de tema (site e slides) ---------- */
.tema-btn { display: inline-grid; place-items: center; width: 34px; height: 34px; padding: 0; border-radius: var(--radius-s); border: 1px solid var(--line); background: transparent; color: var(--muted); cursor: pointer; flex: none; transition: color .15s, border-color .15s, background .15s; }
.tema-btn:hover { color: var(--text); border-color: var(--line-2); background: var(--surface-2); }
.tema-btn svg { width: 18px; height: 18px; display: none; }
.tema-btn[data-pref="sistema"] .ti-sistema, .tema-btn[data-pref="escuro"] .ti-escuro, .tema-btn[data-pref="claro"] .ti-claro { display: block; }

/* troca de tema sem "piscar" as transições */
.tema-trocando, .tema-trocando *, .tema-trocando *::before, .tema-trocando *::after { transition: none !important; }