/* tokens.css - variaveis do projeto URA de Pesquisa
   Cor da marca decidida na abertura: #3387E9 (tema light).
   Rampa gerada pelo paleta.py, colada literal. Hex NUNCA vai em template. */

:root {
  /* Marca (rampa paleta.py --token cor-primaria --tema light) */
  --cor-primaria: #3387E9;
  --cor-primaria-hover: #1872DC;
  --cor-primaria-escura: #135AAD;
  --cor-primaria-suave: #E7EFF8;
  --cor-primaria-soft: rgba(51, 135, 233, 0.12);
  --cor-primaria-sombra: rgba(51, 135, 233, 0.15);
  --cor-primaria-texto: #1872DC;
  --texto-sobre-cor-primaria: #000000;

  /* Superficies (light) */
  --bg: #F4F6F9;
  --surface: #FFFFFF;
  --surface-2: #F9FAFB;
  --borda: #E5E7EB;
  --borda-forte: #D1D5DB;

  /* Texto */
  --texto: #1F2937;
  --texto-medio: #4B5563;
  --texto-fraco: #9AA0A8;

  /* Verde (toggle ligado, upload ok) */
  --verde: #16a34a;
  --verde-suave: #DCFCE7;
  --verde-escuro: #15803D;

  /* Estado */
  --vermelho: #DC2626;
  --vermelho-suave: #FEE2E2;
  --amarelo: #F59E0B;
  --amarelo-suave: #FEF3C7;

  /* Tipografia - duas familias */
  --font: "Inter", -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-titulo: "Sora", "Inter", sans-serif;

  /* Raios */
  --raio-sm: 8px;
  --raio: 12px;
  --raio-lg: 18px;
  --raio-full: 9999px;

  /* Sombras */
  --sombra-sm: 0 1px 2px rgba(16, 24, 40, 0.06);
  --sombra: 0 4px 16px rgba(16, 24, 40, 0.08);
  --sombra-lg: 0 12px 32px rgba(16, 24, 40, 0.12);

  /* Layout */
  --sidebar-width: 248px;
  --topbar-h: 58px;
  --fu-h: 38px;

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