:root {
  --bg: #0b0c0f;
  --fg: #e5e7eb;
  --muted: #9ca3af;
  --card: #12141a;
  --border: #1f2430;
  --brand: #60a5fa;
}
:root.light {
  --bg: #f8fafc;
  --fg: #0f172a;
  --muted: #475569;
  --card: #ffffff;
  --border: #e2e8f0;
  --brand: #2563eb;
}
* { box-sizing: border-box; }
html, body { margin:0; padding:0; }
body {
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial;
  background: var(--bg);
  color: var(--fg);
  line-height: 1.6;
}
.container { width: min(1040px, 92%); margin: 0 auto; }
.nav { display:flex; justify-content:space-between; align-items:center; padding: 20px 0; }
.logo { color: var(--fg); font-weight: 800; text-decoration: none; font-size: 1.1rem; }
.logo span { color: var(--brand); }
#theme-toggle { background: transparent; border: 1px solid var(--border); color: var(--fg); padding: 6px 10px; border-radius: 8px; cursor:pointer; }
.hero { padding: 48px 0 16px; }
.hero h1 { font-size: clamp(1.8rem, 1.4rem + 2vw, 3rem); margin: 0 0 8px; }
.hero p { color: var(--muted); margin: 0 0 16px; }
.actions { display:flex; gap:12px; }
.btn { background: var(--brand); color: white; padding: 10px 16px; border-radius: 10px; text-decoration: none; font-weight: 600; }
.btn.outline { background: transparent; color: var(--brand); border: 1px solid var(--brand); }
.grid { display:grid; gap:16px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); margin: 24px 0; }
.card {
  background: var(--card); border: 1px solid var(--border); border-radius: 14px;
  padding: 18px; box-shadow: 0 0 0 1px transparent;
}
.card h2, .card h3 { margin-top: 0; }
.link { color: var(--brand); text-decoration: none; font-weight: 600; }
.link:hover { text-decoration: underline; }
.list { list-style: none; padding: 0; margin: 0; }
.list li + li { margin-top: 6px; }
.footer { padding: 32px 0 48px; color: var(--muted); text-align: center; }
@media (prefers-color-scheme: light) {
  :root:not(.light) { /* mantém dark por padrão, mas respeita toggle */ }
}