/* Design tokens — sites e projetos (base: azul + slate, já usado nos dashboards) */
@import url("https://fonts.googleapis.com/css2?family=Sora:wght@600;700;800&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500;700&display=swap");

:root {
  /* Marca — azul */
  --brand-50:#eff6ff; --brand-100:#dbeafe; --brand-200:#bfdbfe; --brand-300:#93c5fd;
  --brand-400:#60a5fa; --brand-500:#3b82f6; --brand-600:#2563eb; --brand-700:#1d4ed8;
  --brand-800:#1e40af; --brand-900:#1e3a8a;
  /* Acento — ciano (links em fundo escuro, destaques) */
  --accent-300:#7dd3fc; --accent-400:#38bdf8; --accent-500:#0ea5e9; --accent-600:#0284c7;
  /* Neutros — slate */
  --n-0:#ffffff; --n-50:#f8fafc; --n-100:#f1f5f9; --n-200:#e2e8f0; --n-300:#cbd5e1;
  --n-400:#94a3b8; --n-500:#64748b; --n-600:#475569; --n-700:#334155;
  --n-800:#1e293b; --n-900:#0f172a; --n-950:#020617;
  /* Semânticas */
  --success:#10b981; --success-strong:#047857;
  --warning:#f59e0b; --warning-strong:#b45309;
  --danger:#ef4444;  --danger-strong:#b91c1c;
  --info:var(--accent-500);

  /* Tipografia */
  --font-title:"Sora", system-ui, sans-serif;
  --font-body:"Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:"JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --fs-xs:.75rem; --fs-sm:.875rem; --fs-base:1rem; --fs-lg:1.125rem;
  --fs-xl:1.25rem; --fs-2xl:1.5rem; --fs-3xl:1.875rem; --fs-4xl:2.25rem; --fs-5xl:3rem;
  --lh-tight:1.15; --lh-snug:1.3; --lh-body:1.6;

  /* Espaço, raio, sombra */
  --sp-1:.25rem; --sp-2:.5rem; --sp-3:.75rem; --sp-4:1rem; --sp-6:1.5rem; --sp-8:2rem; --sp-12:3rem;
  --radius-sm:6px; --radius:10px; --radius-lg:16px;
  --shadow-sm:0 1px 2px rgb(15 23 42/.08); --shadow:0 4px 14px rgb(15 23 42/.12);

  /* Papéis (tema claro por defeito) */
  --bg:var(--n-50); --surface:var(--n-0); --surface-2:var(--n-100);
  --border:var(--n-200); --text:var(--n-900); --text-muted:var(--n-600);
  --primary:var(--brand-600); --primary-hover:var(--brand-700); --on-primary:#fff;
  --link:var(--brand-700); --focus:var(--accent-500);
}

/* Tema escuro: automático ou forçado com data-theme="dark" */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:var(--n-950); --surface:var(--n-900); --surface-2:var(--n-800);
    --border:var(--n-700); --text:var(--n-100); --text-muted:var(--n-400);
    --primary:var(--brand-500); --primary-hover:var(--brand-400); --on-primary:var(--n-950);
    --link:var(--accent-400); --shadow:0 4px 14px rgb(0 0 0/.5);
  }
}
:root[data-theme="dark"] {
  --bg:var(--n-950); --surface:var(--n-900); --surface-2:var(--n-800);
  --border:var(--n-700); --text:var(--n-100); --text-muted:var(--n-400);
  --primary:var(--brand-500); --primary-hover:var(--brand-400); --on-primary:var(--n-950);
  --link:var(--accent-400); --shadow:0 4px 14px rgb(0 0 0/.5);
}

body { background:var(--bg); color:var(--text); font:var(--fs-base)/var(--lh-body) var(--font-body); }
h1,h2,h3,h4 { font-family:var(--font-title); line-height:var(--lh-tight); letter-spacing:-.01em; }
h1{font-size:var(--fs-5xl);font-weight:800} h2{font-size:var(--fs-3xl);font-weight:700}
h3{font-size:var(--fs-xl);font-weight:600} h4{font-size:var(--fs-lg);font-weight:600}
a{color:var(--link)} code,pre,.num{font-family:var(--font-mono)}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px}