/* tokens.css
   Unica fonte de cor, espaco, raio, sombra e camada do projeto.
   Regras: Sistema_de_Estilos, GEFICON_Manual_de_Marca, Padrao_Box_Card, Padrao_Elevacao_Zindex.

   PROIBIDO escrever #DEAD2F ou #A88015 em template ou em outro CSS.
   PROIBIDO ambar preenchendo area grande: e cor de destaque, nao de fundo.

   DOIS VOCABULARIOS: a vault nomeia o mesmo token de duas formas. Sistema_de_Estilos
   diz --bg, --border, --text, --radius. As notas de componente (Padrao_Menu_Sidebar,
   Padrao_Sidebar_Rodape, Padrao_Box_Card) dizem --branco, --borda, --texto, --raio.
   Os dois conjuntos existem aqui, e o segundo aponta para o primeiro. Assim CSS copiado
   literal de qualquer nota funciona sem tradução manual. */

:root {
  /* ---------- Superficie (tema light, decidido no PASSO 0) ---------- */
  --bg: #FFFFFF;
  --bg-elev: #FAFAFA;
  --surface: #FFFFFF;
  --border: #E5E5E5;
  --border-forte: #D4D4D4;

  /* ---------- Texto ---------- */
  --text: #1A1A1A;
  --text-suave: #4A4A4A;
  --text-secundario: #6B6B6B;
  --text-dim: #808080;         /* Cinza Medio do manual de marca */

  /* ---------- Marca GEFICON ---------- */
  --accent: #DEAD2F;           /* ambar, so em fill pequeno: faixa de KPI, pilula, barra ativa */
  --accent-hover: #E8B82A;
  --accent-dark: #A88015;      /* ambar escuro, obrigatorio sobre fundo branco */
  --accent-soft: rgba(222, 173, 47, 0.12);
  --accent-sombra: rgba(168, 128, 21, 0.18);

  /* Degrade do LOGOTIPO, e so dele. Este app e light, entao vale a variante de
     fundo branco do manual, secao 03: "Logotipo: degrade cinza escuro #777777 ->
     #444444". O degrade ALUMINIO (#F0F0F0 -> #B8B8B8) e o de fundo preto, e nao
     entra aqui. Secao 05: "Nao usar o degrade aluminio em elementos que nao sejam
     o logotipo", e a mesma disciplina vale para este: nenhum outro componente usa. */
  --logo-topo: #777777;
  --logo-base: #444444;

  /* ---------- Semaforo de status. O ambar da marca nao serve de semaforo ---------- */
  --success: #16a34a;
  --success-soft: #f0fdf4;
  --danger: #dc2626;
  --danger-soft: #fef2f2;
  --warning: #f59e0b;
  --warning-soft: #fffbeb;
  --info: #2563eb;
  --info-soft: #eff6ff;

  /* ---------- Tipografia ---------- */
  --font: "Inter", "Helvetica Neue", Helvetica, system-ui, sans-serif;
  --font-titulo: "Sora", "Inter", system-ui, sans-serif;
  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs-base: 14px;
  --fs-lg: 16px;
  --fs-xl: 20px;
  --fs-2xl: 28px;

  /* ---------- Espaco ---------- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;

  /* ---------- Raio (Padrao_Box_Card). Valor solto e proibido ---------- */
  --raio-sm: 8px;              /* controles: input, botao, pilula */
  --raio: 12px;                /* cards, boxes, paineis */
  --raio-lg: 18px;             /* modais grandes */
  --raio-full: 9999px;         /* pilulas e avatares */

  /* ---------- Sombra (Padrao_Box_Card) ---------- */
  --sombra-sm: 0 1px 2px rgba(15, 23, 42, .06);
  --sombra: 0 4px 12px rgba(15, 23, 42, .08);
  --sombra-md: 0 8px 20px rgba(15, 23, 42, .12);
  --sombra-lg: 0 18px 44px rgba(15, 23, 42, .18);

  --transicao: .18s ease;

  /* ---------- Chrome da aplicacao ---------- */
  --sidebar-width: 248px;      /* canonica: o drag handle escreve nesta */
  --topbar-h: 60px;
  --fu-h: 38px;                /* altura unica da BARRA DE FILTROS de listagem */
  --form-h: 40px;              /* altura dos controles de FORMULARIO de cadastro */

  /* ---------- Elevacao (Padrao_Elevacao_Zindex). Numero solto e proibido ---------- */
  --z-base: 0;
  --z-sidebar: 100;
  --z-sticky: 200;
  --z-dropdown: 300;
  --z-overlay: 400;
  --z-modal: 500;
  --z-toast: 600;
  --z-tooltip: 700;

  /* ---------- Alias do vocabulario das notas de componente ---------- */
  --branco: var(--surface);
  --fundo: var(--bg-elev);
  --borda: var(--border);
  --borda-forte: var(--border-forte);
  --texto: var(--text);
  --texto-suave: var(--text-suave);
  --texto-secundario: var(--text-secundario);
  --texto-fraco: var(--text-dim);
  --cor-primaria: var(--accent);
  --cor-primaria-suave: var(--accent-soft);
  --cor-primaria-escura: var(--accent-dark);
  --radius-sm: var(--raio-sm);
  --radius: var(--raio);
  --radius-lg: var(--raio-lg);
  --sidebar-w: var(--sidebar-width);
  --verde: var(--success);
  --verde-suave: var(--success-soft);
  --vermelho: var(--danger);
  --vermelho-suave: var(--danger-soft);
  --ambar: var(--warning);
  --ambar-suave: var(--warning-soft);
  --azul-info: var(--info);
}