/*
  PORQUE EXISTE: tokens + tipografia base do WRAPPER.
  O look final vem do tema ativo (pro por defeito).
*/
@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap");

:root {
  --fundo-app: #212121;
  --fundo-painel: #212121;
  --fundo-editor: #171717;
  --fundo-caixa: #2f2f2f;
  --fundo-hover: rgba(255, 255, 255, 0.08);
  --fundo-selecao: rgba(255, 255, 255, 0.16);
  --borda: #3e3e3e;
  --borda-forte: #565656;
  --texto: #ececec;
  --texto-fraco: #c5c5c5;
  --texto-apagado: #9b9b9b;
  --destaque: #10a37f;
  --destaque-2: #1a7f64;
  --azul-link: #7eb8ff;
  --ok: #3dd68c;
  --aviso: #e6b84d;
  --erro: #ef6b6b;
  --fonte-ui: "IBM Plex Sans", "Segoe UI", sans-serif;
  --fonte-marca: "IBM Plex Sans", sans-serif;
  --fonte-mono: "IBM Plex Mono", Consolas, monospace;
  --raio: 10px;
  --raio-sm: 8px;
  --trans: 140ms ease;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body { height: 100%; height: 100dvh; overflow: hidden; }

body {
  font-family: var(--fonte-ui);
  font-size: 15px;
  color: var(--texto);
  background: var(--fundo-app);
  -webkit-text-size-adjust: 100%;
}

.ide { position: relative; z-index: 1; }

::selection { background: var(--fundo-selecao); color: #fff; }

svg {
  width: 16px; height: 16px; fill: none; stroke: currentColor;
  stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
}

.btn-icone {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border: 1px solid var(--borda);
  border-radius: var(--raio-sm);
  background: var(--fundo-caixa); color: var(--texto-fraco); cursor: pointer;
  transition: background var(--trans), color var(--trans), border-color var(--trans);
}
.btn-icone:hover {
  background: var(--fundo-hover); color: var(--texto);
  border-color: var(--borda-forte);
}

.btn-primario {
  border: none; border-radius: var(--raio); padding: 10px 16px;
  background: var(--destaque);
  color: #fff; font-weight: 650; font-family: var(--fonte-ui);
  cursor: pointer;
}
.btn-primario:hover { filter: brightness(1.08); }

.link-azul { color: var(--azul-link); text-decoration: none; font-size: 12px; }
.link-azul:hover { text-decoration: underline; }

* {
  scrollbar-width: thin;
  scrollbar-color: #3d4658 transparent;
}
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb {
  background: #3d4658; border-radius: 6px;
}
*::-webkit-scrollbar-thumb:hover { background: #52607a; }