/* =========================================================
   COLABORADORES DIGITAIS — Design System
   Token architecture: 2 directions × 2 modes
   --------------------------------------------------------
   [data-dir="a"]  Operação  — dark-first, painel/terminal aquecido
   [data-dir="b"]  Equipe    — light-first, editorial/humano
   [data-mode]     dark | light  (cada direção define os dois)
   ========================================================= */

/* ---------- Shared scale (spacing / radius / type) ---------- */
:root{
  --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;

  /* accent (âmbar) — constante nas duas direções */
  --accent:#f5a524;
  --accent-press:#e6951a;
  --accent-ink:#231806;          /* texto sobre âmbar */

  /* status (funcional) */
  --ok:#27c08a;
  --ok-ink:#04130d;
  --warn:#f5a524;
  --crit:#e0563f;

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

/* ============ DIREÇÃO A — OPERAÇÃO ============ */
[data-dir="a"]{
  --font-display:"Newsreader", Georgia, serif;
  --font-sans:"Hanken Grotesk", system-ui, sans-serif;
  --font-mono:"Space Mono", ui-monospace, monospace;

  --radius-sm:8px;
  --radius:14px;
  --radius-lg:20px;
  --panel-radius:18px;

  --display-weight:500;
  --label-spacing:.18em;
}
[data-dir="a"][data-mode="dark"]{
  --bg:#100e0a;
  --bg-2:#161309;
  --surface:#1a160d;
  --surface-2:#221d11;
  --line:#2e2716;
  --line-2:#3c3320;
  --text:#f4ecda;
  --text-2:#d8cbac;
  --muted:#a4977a;
  --faint:#6f6651;
  --accent-soft:rgba(245,165,36,.13);
  --accent-line:rgba(245,165,36,.35);
  --ok-soft:rgba(39,192,138,.14);
  --crit-soft:rgba(224,86,63,.16);
  --shadow:0 24px 60px -28px rgba(0,0,0,.8);
  --glow:0 0 0 1px var(--accent-line), 0 10px 40px -16px rgba(245,165,36,.25);
  --traffic:#3c3320;
}
[data-dir="a"][data-mode="light"]{
  --bg:#f4efe3;
  --bg-2:#efe8d8;
  --surface:#fffdf6;
  --surface-2:#f7f1e3;
  --line:#e3d9c2;
  --line-2:#d6c9aa;
  --text:#1d1809;
  --text-2:#473d27;
  --muted:#7a6f56;
  --faint:#a99c7e;
  --accent-soft:rgba(245,165,36,.16);
  --accent-line:rgba(216,150,28,.5);
  --ok-soft:rgba(19,138,94,.12);
  --crit-soft:rgba(224,86,63,.12);
  --shadow:0 22px 50px -30px rgba(60,45,10,.45);
  --glow:0 0 0 1px var(--accent-line), 0 12px 36px -18px rgba(245,165,36,.45);
  --traffic:#d6c9aa;
}

/* ============ DIREÇÃO B — EQUIPE ============ */
[data-dir="b"]{
  --font-display:"Spectral", Georgia, serif;
  --font-sans:"Schibsted Grotesk", system-ui, sans-serif;
  --font-mono:"JetBrains Mono", ui-monospace, monospace;

  --radius-sm:6px;
  --radius:10px;
  --radius-lg:14px;
  --panel-radius:14px;

  --display-weight:600;
  --label-spacing:.14em;
}
[data-dir="b"][data-mode="light"]{
  --bg:#f7f3ea;
  --bg-2:#f1ece0;
  --surface:#fffefb;
  --surface-2:#f6f1e6;
  --line:#e7e0d0;
  --line-2:#dcd3bf;
  --text:#211d15;
  --text-2:#4a4334;
  --muted:#867c66;
  --faint:#b3a98f;
  --accent-soft:rgba(245,165,36,.15);
  --accent-line:rgba(214,150,30,.45);
  --ok-soft:rgba(19,138,94,.12);
  --crit-soft:rgba(224,86,63,.1);
  --shadow:0 26px 60px -34px rgba(40,32,12,.4);
  --glow:0 0 0 1px var(--accent-line), 0 16px 40px -20px rgba(245,165,36,.35);
  --traffic:#dcd3bf;
}
[data-dir="b"][data-mode="dark"]{
  --bg:#0e0d0b;
  --bg-2:#141210;
  --surface:#191714;
  --surface-2:#211e1a;
  --line:#2b2722;
  --line-2:#3a352e;
  --text:#f1ebe0;
  --text-2:#cfc6b6;
  --muted:#9a8f7c;
  --faint:#6a6253;
  --accent-soft:rgba(245,165,36,.12);
  --accent-line:rgba(245,165,36,.32);
  --ok-soft:rgba(39,192,138,.13);
  --crit-soft:rgba(224,86,63,.15);
  --shadow:0 24px 60px -30px rgba(0,0,0,.78);
  --glow:0 0 0 1px var(--accent-line), 0 12px 40px -18px rgba(245,165,36,.22);
  --traffic:#3a352e;
}

/* ---------------- 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;
  transition:background .4s var(--ease), color .4s var(--ease);
  overflow-x:clip;
}
h1,h2,h3,h4{margin:0; font-weight:var(--display-weight); line-height:1.05; letter-spacing:-.015em;}
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(--muted);
}
.accent{color:var(--accent);}
.serif-accent{font-family:var(--font-display); font-style:italic;}

/* ---------------- 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;
}
.toggles{display:flex; gap:var(--s-3); align-items:center;}
.seg{
  display:inline-flex; background:var(--surface-2); border:1px solid var(--line);
  border-radius:999px; padding:3px;
}
.seg button{
  font:inherit; font-family:var(--font-mono); font-size:11px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted);
  background:transparent; border:0; cursor:pointer;
  padding:7px 13px; border-radius:999px; transition:.2s var(--ease);
  white-space:nowrap;
}
.seg button[aria-pressed="true"]{ background:var(--accent); color:var(--accent-ink); }
.seg.alt button[aria-pressed="true"]{ background:var(--text); color:var(--bg); }

/* section rhythm */
.section{padding:var(--s-9) 0; border-top:1px solid var(--line);}
.section:first-of-type{border-top: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;}