/* ══════════════════════════════════════════════════════════════════════
   Sync — Design System (fonte única de tokens)
   Identidade Sync (Atende Direito) 2026-07 · azul/índigo/marinho · claro/escuro
   Fonte canônica: branding/kit/ · ver branding/identidade-2026-07.md
   Carregado por index.html e admin.html. NÃO redefinir :root nas páginas.
   Arquitetura em 2 camadas: rampas cruas → tokens semânticos (claro/escuro).

   COMPAT: os nomes semânticos herdados --gold* (acento) e --emerald* (ação)
   permanecem como aliases da NOVA marca — hoje ambos apontam para o azul
   Sync (#2F6FE0 / Índigo #2A3FC9). Não há mais ouro nem esmeralda: são só
   apelidos. Código novo deve preferir --brand / --brand-d / --brand-light.
   ══════════════════════════════════════════════════════════════════════ */

:root{
  /* ── Rampas cruas (paleta da marca) ────────────────────────────────── */
  /* neutros cool (slate) — base fria, casa com Marinho/Nuvem/Branco Gelo */
  --n-0:#ffffff;  --n-25:#fbfcfe; --n-50:#f5f8fc;  --n-100:#eef3f9;
  --n-150:#e6ecf4; --n-200:#d8e1ee; --n-300:#c3cfe0; --n-400:#94a3b8;
  --n-500:#64748b; --n-550:#5c6b82; --n-600:#475569; --n-700:#334155;
  --n-800:#1e293b; --n-900:#0f172a; --n-950:#0a1324;
  /* azul da marca (acento) — Azul Claro → Azul Estagiário → Índigo */
  --brand-50:#eef4fe; --brand-100:#dde9fd; --brand-200:#bcd4fb; --brand-300:#8fb8f8;
  --brand-400:#57b7f7; --brand-500:#2f6fe0; --brand-600:#2557c4; --brand-700:#2a3fc9;
  --brand-800:#22347e;
  /* apelidos herdados: --gold-* AGORA é o azul da marca (sem ouro) */
  --gold-50:var(--brand-50);  --gold-100:var(--brand-100); --gold-200:var(--brand-200);
  --gold-300:var(--brand-300); --gold-400:var(--brand-500); --gold-500:var(--brand-600);
  --gold-600:var(--brand-700); --gold-700:var(--brand-800);
  /* ação primária (era esmeralda) → azul da marca */
  --em-500:var(--brand-500); --em-600:var(--brand-700);
  /* status (funcional, fora da paleta de marca) */
  --green-50:#ecfdf3; --green-600:#027a48; --green-500:#059669;
  --red-50:#fef3f2; --red-100:#fee4e2; --red-500:#d92d20; --red-600:#b42318;
  --amber-50:#fffaeb; --amber-600:#b54708;
  --orange-50:#fff7ed; --orange-600:#c2410c;

  /* ── Gradientes da marca (kit) ─────────────────────────────────────── */
  --brand-grad:linear-gradient(120deg,#57B7F7 0%,#2F6FE0 52%,#2A3FC9 100%);
  --brand-grad-sym:linear-gradient(135deg,#57B7F7 0%,#2F6FE0 45%,#0A1324 100%);

  /* ── Tokens semânticos — CLARO (nomes usados no app inteiro) ────────── */
  --brand:var(--brand-500); --brand-d:var(--brand-700); --brand-light:var(--brand-400);
  --paper:var(--n-50); --paper-hover:var(--n-100); --card:var(--n-0);
  --line:var(--n-150); --line-soft:var(--n-100); --line-strong:var(--n-200);
  --night:#0a1324; --ink-on-gold:#ffffff;
  --gold:var(--brand-500); --gold-light:var(--brand-400);
  --gold-d:var(--brand-700); --gold-soft:var(--brand-50);
  --gold-wash:rgba(47,111,224,.05);
  --emerald:var(--brand-500); --emerald-d:var(--brand-700);
  /* --muted/--faint usam n-550, não n-500: o n-500 dá 4,47:1 sobre --paper e
     4,27:1 sobre --paper-hover (linha em hover) — reprova AA. n-550 sobe para
     5,08 / 4,85. No claro os dois andam juntos, como sempre andaram; a separação
     apoio→rótulo só existe no escuro, onde o texto de 10-11px precisa da folga. */
  --text:var(--n-900); --body:var(--n-700); --muted:var(--n-550); --faint:var(--n-550);
  --ok:var(--green-600); --warn:var(--amber-600); --danger:var(--red-500);
  --danger-soft:var(--red-50); --danger-strong:var(--red-600);
  /* perigo SÓLIDO: fundo de botão destrutivo/cobrança + a tinta que vai por cima.
     --danger-strong é cor de TEXTO e troca de claro↔escuro — nunca use como fundo. */
  --danger-solid:var(--red-600); --on-danger-solid:#ffffff;
  --warn-soft:var(--amber-50); --ok-soft:var(--green-50);
  --neutral-soft:#eef3f9; --neutral-ink:#475569;
  --prazo-d3-bg:var(--orange-50); --prazo-d3-ink:var(--orange-600);
  --prazo-d1-bg:var(--red-50);    --prazo-d1-ink:#b91c1c;

  /* ── Superfícies/bordas semânticas (novos aliases p/ evolução) ──────── */
  --surface:var(--card); --surface-sunken:var(--paper);
  --overlay:rgba(10,19,36,.55);

  /* ── Forma & movimento ─────────────────────────────────────────────── */
  --radius:14px;
  --shadow:0 1px 2px rgba(10,19,36,.05),0 4px 16px -8px rgba(10,19,36,.09);
  --shadow-lg:0 24px 60px rgba(10,19,36,.16);
  --ease:cubic-bezier(.22,1,.36,1);

  /* ── Tipografia (kit: Sora display · Manrope corpo) ────────────────── */
  --font-display:"Sora","Manrope","Inter",sans-serif;
  --font-body:"Manrope",-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  /* mono técnico — números, IDs, nº CNJ, datas, métricas (sempre tabular) */
  --font-mono:"JetBrains Mono","Source Code Pro",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  color-scheme:light;
}

/* ══ Tokens semânticos — ESCURO ══════════════════════════════════════════
   Remapeia SÓ os nomes semânticos (as páginas nunca tocam nas rampas).
   Ativa por preferência do SO OU por [data-theme=dark] explícito.
   [data-theme=light] força claro mesmo com SO escuro.                     */
@media (prefers-color-scheme:dark){ :root:not([data-theme=light]){ color-scheme:dark;
  --paper:#0a1324; --paper-hover:#11203a; --card:#11203a;
  --line:#1e3350; --line-soft:#16273f; --line-strong:#284a72;
  --brand:#57b7f7; --brand-d:#2f6fe0; --brand-light:#8fc4fb;
  --gold:#57b7f7; --gold-light:#8fc4fb; --gold-d:#7cb8fb; --gold-soft:rgba(87,183,247,.14);
  --gold-wash:rgba(87,183,247,.06);
  --emerald:#2f6fe0; --emerald-d:#2a3fc9;
  --ink-on-gold:#0a1324;
  --text:#f5f8fc; --body:#cbd7e8; --muted:#94a3b8; --faint:#808fa6;
  --ok:#34d399; --warn:#fbbf24; --danger:#f87171;
  --danger-soft:rgba(239,68,68,.15); --danger-strong:#fca5a5;
  --danger-solid:#fca5a5; --on-danger-solid:#0a1324;
  --warn-soft:rgba(245,158,11,.15); --ok-soft:rgba(16,185,129,.15);
  --neutral-soft:#16273f; --neutral-ink:#a9b6ca;
  --prazo-d3-bg:rgba(234,88,12,.16); --prazo-d3-ink:#fdba74;
  --prazo-d1-bg:rgba(220,38,38,.16); --prazo-d1-ink:#fca5a5;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px -12px rgba(0,0,0,.6);
  --shadow-lg:0 28px 70px rgba(0,0,0,.6);
}}
[data-theme=dark]{ color-scheme:dark;
  --paper:#0a1324; --paper-hover:#11203a; --card:#11203a;
  --line:#1e3350; --line-soft:#16273f; --line-strong:#284a72;
  --brand:#57b7f7; --brand-d:#2f6fe0; --brand-light:#8fc4fb;
  --gold:#57b7f7; --gold-light:#8fc4fb; --gold-d:#7cb8fb; --gold-soft:rgba(87,183,247,.14);
  --gold-wash:rgba(87,183,247,.06);
  --emerald:#2f6fe0; --emerald-d:#2a3fc9;
  --ink-on-gold:#0a1324;
  --text:#f5f8fc; --body:#cbd7e8; --muted:#94a3b8; --faint:#808fa6;
  --ok:#34d399; --warn:#fbbf24; --danger:#f87171;
  --danger-soft:rgba(239,68,68,.15); --danger-strong:#fca5a5;
  --danger-solid:#fca5a5; --on-danger-solid:#0a1324;
  --warn-soft:rgba(245,158,11,.15); --ok-soft:rgba(16,185,129,.15);
  --neutral-soft:#16273f; --neutral-ink:#a9b6ca;
  --prazo-d3-bg:rgba(234,88,12,.16); --prazo-d3-ink:#fdba74;
  --prazo-d1-bg:rgba(220,38,38,.16); --prazo-d1-ink:#fca5a5;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px -12px rgba(0,0,0,.6);
  --shadow-lg:0 28px 70px rgba(0,0,0,.6);
}

/* ── Número técnico (mono + tabular): métricas, nº CNJ, datas, valores ─── */
.num{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1,"zero" 1;letter-spacing:-.01em}

/* ── Rótulo de seção da nav (agrupa a sidebar) ────────────────────────── */
/* .62 sobre o marinho = 7,5:1 (AA). Era .34 = 3,07:1 — reprovava em 10px.
   NOTA: index.html redefine `nav .nav-sec` e vence na cascata; lá também já está
   em .62 (7,54:1). Mexeu aqui, mexa lá — senão a correção não chega no app. */
.nav-sec{font-family:var(--font-mono);font-size:10px;text-transform:uppercase;letter-spacing:.14em;
  font-weight:600;color:rgba(255,255,255,.62);padding:16px 12px 6px;margin:0}
.nav-sec:first-child{padding-top:2px}

/* ── Ícones (sprite Lucide/Feather, stroke) ───────────────────────────── */
.ico{width:18px;height:18px;flex-shrink:0;stroke:currentColor;fill:none;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ico.sm{width:15px;height:15px}
svg.sprite{position:absolute;width:0;height:0;overflow:hidden}

/* ── Botão de tema ─────────────────────────────────────────────────────── */
.theme-tgl{background:transparent;border:1px solid rgba(255,255,255,.16);color:rgba(255,255,255,.7);
  width:34px;height:34px;padding:0;border-radius:8px;display:inline-flex;align-items:center;justify-content:center}
.theme-tgl:hover{background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.28)}
.theme-tgl .ico{width:17px;height:17px}
.theme-tgl .moon{display:none} [data-theme=dark] .theme-tgl .moon{display:block}
[data-theme=dark] .theme-tgl .sun{display:none}
@media (prefers-color-scheme:dark){ :root:not([data-theme=light]) .theme-tgl .sun{display:none}
  :root:not([data-theme=light]) .theme-tgl .moon{display:block} }