/* ==========================================================================
   base.css — Fundamentos do site @JottaCyber
   Tokens de cor, temas (claro/escuro), reset e tipografia.
   Compartilhado por TODAS as páginas. © @JottaCyber
   ========================================================================== */

/* ---- Tokens (tema claro = padrão) ---- */
:root {
  --bg: #f4f6f9;
  --surface: #ffffff;
  --surface-2: #eef1f6;
  --ink: #10151f;
  --muted: #5b6675;
  --line: #dde3ec;

  --accent: #0f7d8c;         /* teal — cor da marca */
  --accent-ink: #0a5a66;
  --accent-contrast: #ffffff;

  /* estados / categorias (usados no deck) */
  --errei: #d64550;
  --dificuldade: #d98a1f;
  --dominei: #2f9e5f;
  --net: #0f7d8c;
  --so: #6b57c7;
  --infra: #b5642a;

  /* painel escuro fixo (verso dos cartões, blocos de código) */
  --card-back: #0e1b26;
  --card-back-ink: #e6edf3;
  --card-back-line: #24384a;

  --shadow: 0 1px 2px rgba(16,21,31,.06), 0 8px 24px rgba(16,21,31,.06);
  --radius: 14px;
  --maxw: 1080px;

  --font-sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  color-scheme: light;
}

/* ---- Tema escuro por preferência do sistema (sem escolha explícita) ---- */
:root:not([data-theme="light"]) { @media (prefers-color-scheme: dark) {
  --bg:#0b0f16; --surface:#121926; --surface-2:#0e141f; --ink:#e7edf5; --muted:#93a1b3; --line:#223044;
  --accent:#34c3d4; --accent-ink:#7fe0ec; --accent-contrast:#06131a;
  --errei:#f0616c; --dificuldade:#eca93f; --dominei:#4fca82; --net:#34c3d4; --so:#a08cff; --infra:#e0985a;
  --card-back:#060b12; --card-back-ink:#e6edf3; --card-back-line:#1c2c3d;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 30px rgba(0,0,0,.35);
  color-scheme: dark;
} }

/* ---- Tema escuro por escolha explícita (toggle) ---- */
:root[data-theme="dark"] {
  --bg:#0b0f16; --surface:#121926; --surface-2:#0e141f; --ink:#e7edf5; --muted:#93a1b3; --line:#223044;
  --accent:#34c3d4; --accent-ink:#7fe0ec; --accent-contrast:#06131a;
  --errei:#f0616c; --dificuldade:#eca93f; --dominei:#4fca82; --net:#34c3d4; --so:#a08cff; --infra:#e0985a;
  --card-back:#060b12; --card-back-ink:#e6edf3; --card-back-line:#1c2c3d;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 30px rgba(0,0,0,.35);
  color-scheme: dark;
}

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
img, svg { max-width: 100%; display: block; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
code, kbd, pre, .mono { font-family: var(--font-mono); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

/* ---- Tipografia ---- */
h1, h2, h3 { line-height: 1.2; letter-spacing: -.02em; text-wrap: balance; margin: 0 0 .4em; }
h1 { font-size: clamp(1.9rem, 5vw, 3rem); font-weight: 700; }
h2 { font-size: clamp(1.4rem, 3vw, 2rem); font-weight: 700; }
h3 { font-size: 1.15rem; font-weight: 600; }
p { margin: 0 0 1em; }
.eyebrow {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--accent); font-weight: 600; margin: 0 0 10px;
}
.lead { font-size: clamp(1.05rem, 2vw, 1.25rem); color: var(--muted); max-width: 60ch; }

/* ---- Layout utilitário ---- */
.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: 20px; }
.section { padding-block: clamp(48px, 8vw, 88px); }
main { flex: 1 0 auto; }
[hidden] { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}