/* =========================================================
   COLABORADORES DIGITAIS — Design System (fonte de verdade)
   Uma identidade só: NOITE FRIA + ESMERALDA.
   dark-first (primária) + paleta clara fria (seções alternadas).
   Sem direções/modos alternativos. Sem legado âmbar/serif.
   ========================================================= */

:root{
  /* ---------- escala (spacing / radius / type) ---------- */
  --s-1:4px;  --s-2:8px;  --s-3:12px; --s-4:16px; --s-5:24px;
  --s-6:32px; --s-7:48px; --s-8:64px; --s-9:96px; --s-10:128px;

  --radius-sm:10px;
  --radius:14px;
  --radius-lg:20px;
  --panel-radius:18px;
  --radius-pill:999px;

  --maxw:1180px;
  --ease:cubic-bezier(.2,.7,.2,1);

  /* ---------- tipografia ---------- */
  --font-display:"Inter", system-ui, sans-serif;
  --font-sans:"Inter", system-ui, sans-serif;
  --font-mono:"JetBrains Mono", ui-monospace, monospace;
  --display-weight:700;
  --label-spacing:.16em;

  /* ---------- PALETA ESCURA (primária) ---------- */
  --bg:#0b1220;
  --bg-2:#0f1728;
  --surface:#131c2e;
  --surface-2:#1b263d;
  --line:#26324a;
  --line-2:#32405c;
  --text:#eaf0f6;
  --text-2:#c7d2e0;
  --muted:#8b98ad;
  --faint:#5f6b80;

  /* ---------- ACCENT (esmeralda) ---------- */
  --accent:#10b981;
  --accent-press:#0e9f70;
  --accent-ink:#04231a;                 /* texto sobre esmeralda */
  --accent-soft:rgba(16,185,129,.13);
  --accent-line:rgba(16,185,129,.35);

  /* ---------- PALETA CLARA (seções que alternam) ---------- */
  --light:#eef2f7;
  --light-card:#ffffff;
  --light-ink:#0f1a2b;
  --light-ink-2:#47536a;
  --light-line:#dbe3ee;

  /* ---------- status (funcional, ≠ marca) ---------- */
  --ok:#2bd4a0;
  --ok-ink:#04130d;
  --ok-soft:rgba(43,212,160,.14);
  --warn:#f5b544;
  --crit:#ef5f52;
  --crit-soft:rgba(239,95,82,.16);

  /* ---------- efeitos ---------- */
  --shadow:0 24px 60px -28px rgba(0,0,0,.7);
  --glow:0 0 0 1px var(--accent-line), 0 10px 40px -16px rgba(16,185,129,.22);
  --traffic:#32405c;
}

/* ---------------- RESET / BASE ---------------- */
*{box-sizing:border-box;}
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:4.5rem;
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
}
body{
  margin:0;
  font-family:var(--font-sans);
  background:var(--bg);
  color:var(--text);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}
h1,h2,h3,h4{margin:0; font-weight:var(--display-weight); line-height:1.12; letter-spacing:-.02em;}
p{margin:0;}
a{color:inherit;}
::selection{background:var(--accent); color:var(--accent-ink);}

.font-display{font-family:var(--font-display);}
.font-sans{font-family:var(--font-sans);}
.font-mono{font-family:var(--font-mono);}

.label{
  font-family:var(--font-mono);
  font-size:11.5px;
  letter-spacing:var(--label-spacing);
  text-transform:uppercase;
  color:var(--accent);
}
.accent{color:var(--accent);}

/* ---------------- DOC LAYOUT ---------------- */
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 var(--s-5);}

.topbar{
  position:sticky; top:0; z-index:50;
  background:color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.topbar-inner{
  max-width:var(--maxw); margin:0 auto; padding:14px var(--s-5);
  display:flex; align-items:center; gap:var(--s-5); justify-content:space-between;
}

/* section rhythm */
.section{padding:var(--s-9) 0;}
.section-head{display:flex; align-items:baseline; gap:var(--s-4); margin-bottom:var(--s-7); flex-wrap:wrap;}
.section-num{font-family:var(--font-mono); font-size:12px; color:var(--accent); letter-spacing:.1em;}
.section-title{font-family:var(--font-display); font-size:clamp(28px,3.6vw,42px);}
.section-sub{color:var(--muted); max-width:68ch; margin-top:var(--s-2); font-size:15px; line-height:1.6;}

.grid{display:grid; gap:var(--s-5);}
.cols-2{grid-template-columns:repeat(2,1fr);}
.cols-3{grid-template-columns:repeat(3,1fr);}
.cols-4{grid-template-columns:repeat(4,1fr);}
@media(max-width:860px){ .cols-2,.cols-3,.cols-4{grid-template-columns:1fr;} }

.card-doc{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); padding:var(--s-5);
}
.tag-mini{
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--faint);
}
.divider{height:1px; background:var(--line); border:0; margin:var(--s-5) 0;}
.muted{color:var(--muted);}
.note{font-size:13px; color:var(--muted); font-family:var(--font-mono); letter-spacing:.02em;}