/* ============================================================================
   Design system v3 — extraído do funil (board_v2) para o site inteiro.
   ============================================================================
   Por que existe: o board ficou com uma linguagem visual que funciona nos dois
   temas (superfícies com profundidade, borda visível, semânticos coerentes,
   dados em mono tabular). Estava tudo preso no CSS de UMA tela.

   COMO USAR — é OPT-IN, nada muda sozinho:
     - Tokens `--ds-*` ficam disponíveis em qualquer tela (só declaração).
     - Classes `.ds-*` só valem onde forem escritas.
   Nenhum token do design system antigo (--bg, --surface, --amber…) é
   redefinido aqui: as duas linguagens convivem enquanto a migração acontece.

   Regras que vieram da prática (não mexer sem motivo):
     - Dado numérico SEMPRE em mono + tabular-nums: valor que dança de largura
       entre linhas é o que faz tabela financeira parecer amadora.
     - Semântico ≠ marca: verde/vermelho falam de RESULTADO, âmbar é a marca.
       Botão primário é âmbar; "ganho" é verde. Nunca o contrário.
     - No dark a superfície SOBE (fundo fundo, card claro) e a borda aparece.
       Dark chapado (tudo do mesmo cinza) foi o que fez a v1 do board parecer
       sem acabamento.
   ========================================================================== */

:root {
  /* Diz ao navegador em que tema ele está desenhando. É o que conserta o que
     o CSS NÃO alcança: a lista de opções do <select> (que é do sistema
     operacional), o seletor de data, os controles de formulário e a barra de
     rolagem. Sem isto, o dropdown abre branco com destaque azul no meio de
     uma tela escura. */
  color-scheme: light;
  accent-color: var(--amber, #f0a500);

  /* superfícies: fundo → superfície → elevado */
  /* mesma area de trabalho do --bg — voltou ao branco neutro do JURISCOPE.
     Contraste MELHORA em tudo, porque o fundo ficou mais claro: --ds-text
     16.09 -> 16.97, --ds-text-dim 5.08 -> 5.35, --ds-text-faint 4.63 -> 4.88,
     --ds-border-field 3.38 -> 3.57. Nenhum token precisou de reajuste. */
  --ds-bg: #fafafa;
  --ds-surface: #ffffff;
  --ds-surface-2: #eceef1;
  --ds-border: #dfe4f0;
  --ds-border-strong: #c4cde0;
  /* Borda que o usuário precisa PERCEBER (input, select, textarea): WCAG
     1.4.11 exige 3:1. --ds-border dá 1.27:1 e continua servindo como
     divisória decorativa, onde o critério não se aplica.
     Este tom: 3.72:1 sobre --ds-surface, 3.20:1 sobre --ds-surface-2. */
  --ds-border-field: #79859b;

  /* texto */
  --ds-text: #141824;
  --ds-text-dim: #5b6884;
  /* Era #8b97ad: 2.95:1 sobre branco e 2.53:1 sobre o cinza do cabeçalho de
     tabela — reprovava nos dois. Foi reajustado quando a pagina desceu de
     #fafafa para #f2f4f9; com a volta ao #fafafa ele sobe para 4.88:1 sobre a
     pagina e segue 5.09:1 sobre o cartao branco — continua aprovado, agora
     com folga. */
  --ds-text-faint: #646f7f;

  /* marca (âmbar) — vem do tema antigo para não divergir */
  --ds-brand: var(--amber, #f0a500);
  --ds-brand-strong: var(--amber-dark, #d49200);
  /* Texto sobre âmbar. Branco dava 2.08:1 — reprovado em qualquer critério,
     inclusive texto grande — e era o que pintava TODO botão primário do
     sistema (.v2-btn-primary e .ds-btn-primary). Este tom dá 8.51:1 (AAA).
     A cor da MARCA não mudou: mudou o que se escreve em cima dela.
     Vale nos dois temas, porque o âmbar é o mesmo nos dois. */
  --ds-on-brand: #141824;

  /* Âmbar utilizável como TEXTO — papel diferente do --ds-brand-strong, que
     serve para hover de superfície âmbar e nunca foi pensado para letra.
     Brand-strong em texto dava 2.65:1 sobre branco e 2.47:1 sobre o tint do
     chip: reprovava. Este tom dá 6.56:1 sobre branco e 6.10:1 sobre o tint,
     continuando na família da marca.
     Chip, pill de marca e link âmbar usam ESTE, não o brand-strong. */
  --ds-brand-ink: #7d5600;

  /* Aviso utilizavel como TEXTO pequeno. O --ds-warn serve para icone e borda
     (3:1 basta), mas em pill de 10px sobre o proprio tint ele da 3.11:1 e
     reprova. Este tom da 4.95:1 sobre o tint e 5.78:1 sobre branco. */
  --ds-warn-ink: #875e08;

  /* semânticos: resultado, não marca */
  --ds-ok: #067a4a;
  --ds-ok-soft: #e7f7f0;
  --ds-bad: #c23b34;
  --ds-bad-soft: #fdeceb;
  --ds-warn: #b07d05;
  --ds-idle: #6b7688;
  --ds-idle-soft: #eef1f7;

  /* Espaçamento — escala de 4px. Use os degraus, não números soltos:
     é o que mantém o respiro igual entre telas diferentes. */
  --ds-1: 4px;
  --ds-2: 8px;
  --ds-3: 12px;
  --ds-4: 16px;
  --ds-5: 24px;
  --ds-6: 32px;

  /* Tipografia — sete degraus. Antes disto conviviam 0.82rem, 12.5px, 11px,
     10.5px, 10px e 0.7rem sem regra nenhuma, e cada tela escolhia o seu. */
  --ds-fs-1: 11px;   /* rótulo de coluna, uppercase */
  --ds-fs-2: 12px;   /* meta, descrição de página, ajuda */
  --ds-fs-3: 13px;   /* corpo de tabela e formulário */
  --ds-fs-4: 15px;   /* destaque, ação primária */
  --ds-fs-5: 18px;   /* título de seção */
  --ds-fs-6: 22px;   /* título de página */
  --ds-fs-7: 28px;   /* valor de KPI */

  /* Breakpoints (referência — CSS não lê var em @media):
     ≥1280 desktop · 1024–1279 laptop · 768–1023 tablet · <768 celular */

  --ds-radius: 6px;
  --ds-radius-lg: 10px;
  --ds-shadow: 0 1px 3px rgba(0, 0, 0, .06), 0 1px 2px rgba(0, 0, 0, .04);
  --ds-shadow-pop: 0 10px 28px rgba(0, 0, 0, .18);
  --ds-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  /* Inter é a fonte do sistema — as telas antigas ainda pediam Nunito e
     Poppins, três famílias baixadas do gstatic para dizer a mesma coisa. */
  --ds-font: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}

[data-theme="dark"] {
  color-scheme: dark;
  --ds-bg: #15161a;   /* mesma area de trabalho do --bg */
  --ds-surface: #22252c;      /* card SOBE em relação ao fundo */
  --ds-surface-2: #191c21;
  --ds-border: #32363e;       /* borda visível: sem ela o dark vira mancha */
  --ds-border-strong: #454a55;
  --ds-border-field: #767d8c; /* 3.71:1 no card, 4.13:1 no cabeçalho */

  --ds-text: #eef0f3;
  --ds-text-dim: #9aa1ab;
  --ds-text-faint: #8b93a0;   /* era #6b7280 (3.17:1) — agora 4.95:1 */

  /* No escuro o próprio âmbar da marca já serve como texto: 5.87:1 sobre o
     tint do chip. O tom escuro do tema claro ficaria ilegível aqui. */
  --ds-brand-ink: #f0a500;
  /* no escuro o proprio --ds-warn ja passa como texto sobre o tint */
  --ds-warn-ink: #f5b820;

  --ds-ok: #10b981;
  --ds-ok-soft: rgba(16, 185, 129, .12);
  --ds-bad: #e05a50;
  --ds-bad-soft: rgba(224, 90, 80, .12);
  --ds-warn: #f5b820;
  --ds-idle: #8b97ad;
  --ds-idle-soft: rgba(139, 151, 173, .10);

  --ds-shadow: none;
  --ds-shadow-pop: 0 10px 28px rgba(0, 0, 0, .40);
}

/* ── superfícies ─────────────────────────────────────────────────────────── */
.ds-card {
  background: var(--ds-surface); border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-lg); box-shadow: var(--ds-shadow);
}
.ds-card-flat { background: var(--ds-surface); border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius); }
.ds-card-hover { transition: box-shadow .12s, transform .12s; }
.ds-card-hover:hover { box-shadow: var(--ds-shadow-pop); transform: translateY(-1px); }

/* ── dados: sem isto, número dança de largura entre linhas ───────────────── */
.ds-num { font-family: var(--ds-mono); font-variant-numeric: tabular-nums; }

/* ── rótulos e pills ─────────────────────────────────────────────────────── */
.ds-label {
  font-size: 10.5px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--ds-text-dim);
}
.ds-pill {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--ds-mono); font-size: 10px; font-weight: 700;
  border-radius: 999px; padding: 2px 8px;
  /* --ds-idle daria 4.06:1 sobre o proprio soft, e a pill e 10px. */
  color: var(--ds-text-dim); background: var(--ds-idle-soft);
}
.ds-pill-ok { color: var(--ds-ok); background: var(--ds-ok-soft); }
.ds-pill-bad { color: #fff; background: var(--ds-bad); }
.ds-pill-bad-soft { color: var(--ds-bad); background: var(--ds-bad-soft); }
.ds-pill-outline { background: transparent; border: 1px solid var(--ds-border);
  color: var(--ds-text-dim); }

.ds-chip {
  display: inline-flex; align-items: center; gap: 6px; font-size: 12px;
  font-weight: 600; border-radius: 999px; padding: 3px 11px;
  color: var(--ds-brand-ink); background: color-mix(in srgb, var(--ds-brand) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--ds-brand) 55%, transparent);
}

/* ── botões ──────────────────────────────────────────────────────────────── */
.ds-btn {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  border: 1px solid var(--ds-border); background: var(--ds-surface);
  color: var(--ds-text); border-radius: var(--ds-radius);
  padding: 7px 12px; font-size: 12.5px; font-weight: 600;
}
.ds-btn:hover { border-color: var(--ds-border-strong); }
.ds-btn-primary { background: var(--ds-brand); border-color: var(--ds-brand);
  color: var(--ds-on-brand); font-weight: 700; }
.ds-btn-primary:hover { background: var(--ds-brand-strong); }
.ds-btn-ok { background: var(--ds-ok); border-color: var(--ds-ok); color: #fff; font-weight: 700; }
.ds-btn-bad { background: var(--ds-bad); border-color: var(--ds-bad); color: #fff; font-weight: 700; }

/* ── tabela de dados ─────────────────────────────────────────────────────── */
.ds-table { width: 100%; border-collapse: collapse; }
.ds-table th {
  position: sticky; top: 0; z-index: 2; background: var(--ds-surface-2);
  padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--ds-border);
  font-size: 10px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--ds-text-dim);
}
.ds-table td { padding: 9px 14px; font-size: 12.5px; color: var(--ds-text);
  border-bottom: 1px solid var(--ds-border); }
.ds-table tbody tr:hover td { background: var(--hover-bg, var(--ds-surface-2)); }
.ds-table .num { text-align: right; font-family: var(--ds-mono);
  font-variant-numeric: tabular-nums; }

/* ── foco visível (acessibilidade) ───────────────────────────────────────── */
.ds-focus:focus-visible, .ds-btn:focus-visible {
  outline: 2px solid var(--ds-brand); outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .ds-card-hover { transition: none; }
}


/* ==========================================================================
   Controles de formulário — o mesmo acabamento em todo o sistema.
   Ficam aqui (e não em cada tela) porque select/checkbox/scroll aparecem em
   toda parte, e o que fica de fora salta aos olhos justamente por ser o
   único diferente.
   ========================================================================== */

select, input[type="checkbox"], input[type="radio"], input[type="range"] {
  accent-color: var(--ds-brand);
}

/* select estilizável: o campo. A LISTA de opções é do sistema — quem cuida
   dela é o `color-scheme` acima. */
select:not([multiple]):not(.select2-hidden-accessible) {
  background-color: var(--ds-surface);
  color: var(--ds-text);
  /* --ds-border-field, não --ds-border: isto aqui é CONTROLE de formulário, e
     a borda dele precisa ser percebida (WCAG 1.4.11, 3:1). A divisória
     decorativa fica com --ds-border.

     Cuidado com a especificidade: este seletor é (0,2,1) por causa dos dois
     :not(), então ele VENCE `.ds-field select` (0,1,1) de components.css.
     Enquanto aqui estava --ds-border, todo <select> do sistema saía com
     1.27:1 mesmo dentro de .ds-field — e ficava visivelmente mais fraco que
     o <input> ao lado, que pegava a borda certa. */
  border: 1px solid var(--ds-border-field);
  border-radius: var(--ds-radius);
}
select:not([multiple]):focus-visible,
input:focus-visible, textarea:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--ds-brand) 60%, transparent);
  outline-offset: 1px;
}

input[type="checkbox"], input[type="radio"] { cursor: pointer; }

/* Abaixo de 768px o iOS dá zoom automático em campo com fonte menor que 16px,
   e o zoom desloca o layout inteiro. É a causa mais comum de "o formulário
   pula" no celular. */
@media (max-width: 767px) {
  input, select, textarea { font-size: 16px; }

  /* .ds-btn tem 7px de padding e ~31px de altura — abaixo do alvo de toque de
     44px (Apple HIG; o Material pede 48dp). É o botão de dezenas de telas.
     Estava sendo remendado media query a media query dentro de folhas de tela
     — três delas já traziam esta MESMA regra escrita à mão, o que é o sinal
     clássico de que o lugar certo é aqui.
     Só o piso: quem quiser mais alto continua podendo. */
  .ds-btn { min-height: 44px; }
  .ds-btn-sm { min-height: 38px; }
}

/* barra de rolagem no tema — o cinza claro padrão brilha no escuro */
[data-theme="dark"] * {
  scrollbar-color: var(--ds-border-strong) transparent;
  scrollbar-width: thin;
}
[data-theme="dark"] ::-webkit-scrollbar { width: 10px; height: 10px; }
[data-theme="dark"] ::-webkit-scrollbar-track { background: transparent; }
[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: var(--ds-border-strong); border-radius: 6px;
  border: 2px solid var(--ds-bg);
}
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: var(--ds-text-faint); }