/* IDP — Internal Developer Platform — design tokens + classes udp-*
   Carregue ANTES do tailwind.js em index.html
   Tokens dark = paleta develop (slate-950 / emerald-400) */

/* ── tokens claro ── */
:root {
  --udp-bg: #f8fafc;
  --udp-surface: #ffffff;
  --udp-surface-2: #f1f5f9;
  --udp-line: #e2e8f0;
  --udp-line-2: #cbd5e1;
  --udp-ink: #0f172a;
  --udp-ink-2: #475569;
  --udp-ink-3: #94a3b8;
  --udp-accent: #10b981;
  --udp-accent-ink: #ffffff;
  --udp-accent-soft: #d1fae5;
  --udp-ok: #10b981;
  --udp-ok-soft: #d1fae5;
  --udp-warn: #f59e0b;
  --udp-warn-soft: #fef3c7;
  --udp-crit: #ef4444;
  --udp-crit-soft: #fee2e2;
  --udp-radius: 10px;
  --udp-radius-sm: 7px;
  color-scheme: light;
}

/* ── tokens escuro — paleta develop (slate-950 / emerald-400) ── */
.dark {
  --udp-bg: #0f172a;
  --udp-surface: #0f172a;
  --udp-surface-2: #1e293b;
  --udp-line: #1e293b;
  --udp-line-2: #334155;
  --udp-ink: #f1f5f9;
  --udp-ink-2: #94a3b8;
  --udp-ink-3: #64748b;
  --udp-accent: #34d399;
  --udp-accent-ink: #052e16;
  --udp-accent-soft: #064e3b;
  --udp-ok: #34d399;
  --udp-ok-soft: #064e3b;
  --udp-warn: #fbbf24;
  --udp-warn-soft: #431407;
  --udp-crit: #f87171;
  --udp-crit-soft: #450a0a;
  color-scheme: dark;
}

/* ── scrollbar ── */
.udp-scroll::-webkit-scrollbar { width: 10px; height: 10px }
.udp-scroll::-webkit-scrollbar-thumb { background: var(--udp-line-2); border-radius: 99px; border: 3px solid transparent; background-clip: content-box }
.udp-scroll::-webkit-scrollbar-track { background: transparent }

/* ── tipografia ── */
.udp-eyebrow {
  font-family: ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--udp-ink-3);
  font-weight: 400;
}

/* ── navegação lateral ── */
.udp-nav {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border-radius: var(--udp-radius-sm);
  font-size: 13.5px;
  color: var(--udp-ink-2);
  text-decoration: none;
  background: none;
  border: 0;
  width: 100%;
  text-align: left;
  font-family: inherit;
  cursor: pointer;
  transition: background .13s, color .13s;
}
.udp-nav:hover { background: var(--udp-surface-2); color: var(--udp-ink) }
.udp-nav[data-active] { background: var(--udp-accent-soft); color: var(--udp-accent); font-weight: 600 }

/* dark: hover e active com slate sólido (igual ao develop original) */
.dark .udp-nav:hover { background: rgba(15,23,42,0.4); color: var(--udp-ink) }
.dark .udp-nav[data-active] { background: rgba(15,23,42,0.6); color: var(--udp-ink); border: 1px solid #475569; box-shadow: 0 1px 3px rgba(0,0,0,.3) }

.udp-nav-sub { padding-left: 34px; font-size: 13px }

.udp-group {
  font-family: ui-monospace, monospace;
  font-size: 9.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--udp-ink-3);
  padding: 16px 10px 6px;
}

.udp-count {
  margin-left: auto;
  font-family: ui-monospace, monospace;
  font-size: 10.5px;
  color: var(--udp-ink-3);
  font-variant-numeric: tabular-nums;
}
.udp-count-warn { color: var(--udp-warn) }

.udp-chev { margin-left: auto; color: var(--udp-ink-3); transition: transform .16s }
.udp-chev svg { width: 14px; height: 14px }
.udp-chev[data-open] { transform: rotate(180deg) }

/* ── botões ── */
.udp-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 32px;
  padding: 0 13px;
  border-radius: var(--udp-radius-sm);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 500;
  border: 1px solid var(--udp-line-2);
  background: var(--udp-surface);
  color: var(--udp-ink-2);
  cursor: pointer;
  transition: .13s;
  white-space: nowrap;
}
.udp-btn:hover { border-color: var(--udp-ink-3); color: var(--udp-ink) }
.udp-btn-primary { background: var(--udp-accent); border-color: var(--udp-accent); color: var(--udp-accent-ink); font-weight: 600 }
.udp-btn-primary:hover { filter: brightness(1.07); color: var(--udp-accent-ink); border-color: var(--udp-accent) }
.udp-btn-quiet { border-color: transparent; background: var(--udp-surface-2) }
.udp-btn-quiet:hover { border-color: var(--udp-line-2) }

/* ── campo de busca ── */
.udp-field {
  display: flex;
  align-items: center;
  gap: 9px;
  height: 36px;
  padding: 0 12px;
  border: 1px solid var(--udp-line);
  border-radius: var(--udp-radius-sm);
  background: var(--udp-surface);
  color: var(--udp-ink-3);
  transition: border-color .13s;
}
.udp-field:focus-within { border-color: var(--udp-line-2) }
.udp-field input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  font-family: inherit;
  font-size: 13.5px;
  color: var(--udp-ink);
}
.udp-field input::placeholder { color: var(--udp-ink-3) }

/* ── ícone ── */
.udp-ico { display: inline-flex; align-items: center; justify-content: center; flex: none }
.udp-ico > svg { width: 16px; height: 16px }
.udp-nav .udp-ico > svg { width: 16px; height: 16px; opacity: .75 }
.udp-nav[data-active] .udp-ico > svg { opacity: 1 }
.udp-btn .udp-ico > svg { width: 14px; height: 14px }

/* ── estado ── */
.udp-state { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 500; white-space: nowrap; color: var(--udp-ink-2) }
.udp-state::before { content: ""; width: 6px; height: 6px; border-radius: 99px; background: currentColor; flex: none }
.udp-state-ok { color: var(--udp-ok) }
.udp-state-warn { color: var(--udp-warn) }
.udp-state-crit { color: var(--udp-crit) }


/* Dourado da marca Acme (#b8a557), extraído do logotipo.

   Classe própria, e não uma utility do Tailwind, porque este dourado não
   existe na escala padrão — e porque separar a COR DA MARCA da cor de AVISO
   (âmbar) é justamente o ponto: quando as duas são iguais, o aviso vira
   decoração. Use `udp-marca` para identidade; âmbar continua reservado para
   alerta. */
.udp-marca { color: #b8a557; }