/* Cópia sem mudança dos tokens e das fontes do kromon-padrao (visual/base.css, até a linha antes de "Base"; commit 790a653). Os componentes do kit (botão, campo...) NÃO vêm: a Agenda tem os dela. As fontes ficam em fontes/ (OFL; ver fontes/ORIGEM.md). */
/* NEXO · base visual v0.2 — fonte única dos tokens e dos componentes básicos (ADR-0003).
   Escuro por padrão; claro com <html data-theme="light">. Os apps importam este arquivo e
   sobrescrevem só o que é deles (ex.: --fonte-numeros no Studio). Nada aqui é decorativo. */

/* ---------- Fontes embutidas (OFL; ver fontes/ORIGEM.md) ---------- */
@font-face { font-family: "Archivo"; font-weight: 600; font-display: swap; src: url("fontes/archivo-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Archivo"; font-weight: 700; font-display: swap; src: url("fontes/archivo-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Archivo"; font-weight: 800; font-display: swap; src: url("fontes/archivo-latin-800-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 400; font-display: swap; src: url("fontes/ibm-plex-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 500; font-display: swap; src: url("fontes/ibm-plex-sans-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 600; font-display: swap; src: url("fontes/ibm-plex-sans-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 400; font-display: swap; src: url("fontes/ibm-plex-mono-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 500; font-display: swap; src: url("fontes/ibm-plex-mono-latin-500-normal.woff2") format("woff2"); }

/* ---------- Tokens · tema escuro (padrão) ---------- */
:root {
  color-scheme: dark;
  /* superfícies */
  --fundo: #070707;
  --lateral: #090909;
  --painel: #111111;
  --painel-2: #161616;
  --campo: #141414;
  --trilha: #1f1f1f;
  /* linhas */
  --borda: #292929;          /* divisórias e cartões (decorativa) */
  --borda-forte: #6b6b6b;    /* contorno de controles: 3:1 com o painel */
  /* texto */
  --texto: #f5f5f5;
  --texto-2: #cfcfcf;
  --cinza: #929292;          /* texto secundário: 4,5:1 com painel e fundo */
  --apagado: #6b6b6b;        /* só para o que não é texto (trilhas, divisórias fortes); texto usa --cinza */
  /* marca e ação */
  --vermelho: #ff2b2b;       /* marca, ícones, texto de alerta; nunca fundo de texto branco (3,7:1) */
  --vermelho-acao: #e0201f;  /* todo preenchimento com texto branco: botão, item ativo, badge, bolinha (4,8:1) */
  --sobre-vermelho: #ffffff;
  --vermelho-fundo: #160b0b;
  --vermelho-linha: #482020;
  /* estados */
  --verde: #6fd08c;
  --ambar: #e0b35c;
  --ouro: #f2c46d;
  /* provedores (texto e pontos; sem logotipos) */
  --codex: #7393d6;
  --claude: #c98a4f;
  --sombra: rgba(0, 0, 0, 0.55);

  /* tipografia */
  --fonte-titulo: "Archivo", "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  --fonte-texto: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  --fonte-mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --fonte-numeros: var(--fonte-mono);   /* o Studio sobrescreve com Bahnschrift no visor */
  --tamanho-texto: 14px;
  --altura-linha: 1.5;

  /* espaços (múltiplos de 4 px) */
  --espaco-1: 4px; --espaco-2: 8px; --espaco-3: 12px; --espaco-4: 16px;
  --espaco-5: 20px; --espaco-6: 24px; --espaco-7: 32px; --espaco-8: 40px;

  /* raios */
  --raio: 10px;              /* botões, campos, itens de menu */
  --raio-cartao: 12px;
  --raio-modal: 16px;
  --raio-pilula: 999px;

  /* movimento: só para mudança real */
  --duracao-curta: 180ms;
  --duracao-media: 280ms;
  --duracao-viaja: 340ms;    /* teto só do objeto que viaja (marcador do trilho, círculo da navegação); o resto fica em até 300ms (ADR-0018 R2) */
  --curva: cubic-bezier(.2, .8, .2, 1);
  --mola: linear(0, .25 9%, .62 20%, .9 32%, 1.03 45%, 1.02 58%, 1 75%, 1);        /* objeto que viaja, com --duracao-viaja */
  --mola-curta: linear(0, .5 15%, .92 35%, 1.005 55%, 1);                            /* ajuste curto, com --duracao-curta ou --duracao-media */

  /* menu lateral */
  --menu-largura: 250px;
  --menu-largura-recolhido: 64px;
}

/* ---------- Tokens · tema claro ---------- */
html[data-theme="light"] {
  color-scheme: light;
  --fundo: #f4f4f5;
  --lateral: #ececee;
  --painel: #ffffff;
  --painel-2: #f0f0f2;
  --campo: #ffffff;
  --trilha: #e4e4e7;
  --borda: #d9d9dd;
  --borda-forte: #8a8a8f;
  --texto: #111111;
  --texto-2: #333333;
  --cinza: #6b6b6b;
  --apagado: #8a8a8f;
  --vermelho: #c41a1a;
  --vermelho-acao: #c41a1a;
  --sobre-vermelho: #ffffff;
  --vermelho-fundo: #fdecec;
  --vermelho-linha: #f1c2c2;
  --verde: #177538;
  --ambar: #875c00;
  --ouro: #8f6200;
  --codex: #3b5bd6;
  --claude: #a0521f;
  --sombra: rgba(0, 0, 0, 0.18);
}

@media (prefers-reduced-motion: reduce) {
  :root { --duracao-curta: 0ms; --duracao-media: 0ms; --duracao-viaja: 0ms; }
}
/* Navegador sem linear(): a mola cai para a curva padrão; sem isto, a declaração com var(--mola) seria descartada inteira. */
@supports not (transition-timing-function: linear(0, 1)) {
  :root { --mola: var(--curva); --mola-curta: var(--curva); }
}