/* ==========================================================================
   style.css - TOKENS do Cartao Ponto
   ==========================================================================

   ESTE E O UNICO ARQUIVO ONDE A COR DA MARCA MORA.

   Decisao cravada na abertura do projeto (00_GENESIS/CHECKLIST_APLICACAO.md):

       Token de cor: --cor-primaria (mais --cor-primaria-suave e --cor-primaria-escura)
       Arquivo:      static/css/style.css, bloco :root
       Valor:        #3387E9 (escura #1E6FD0)
       Tema:         light
       PROIBIDO:     o hex aparecer em qualquer template

   Armadilha conhecida da vault: existem DUAS familias de token vivas,
   `--accent` em tokens.css e `--cor-primaria` aqui. Este projeto usa a
   SEGUNDA. Escrever a errada faz a tela cair no azul default sem ninguem
   perceber (Sistema_de_Estilos, secao de desambiguacao).

   Ordem de carga: style.css -> base.css -> layout.css -> components.css
   ========================================================================== */

:root {
  /* ---- Cor da marca ---------------------------------------------------- */
  --cor-primaria:        #3387E9;
  --cor-primaria-escura: #1E6FD0;
  --cor-primaria-suave:  #E9F2FD;   /* fundo do item ativo e do preset ligado */

  /* ---- Superficies e texto (tema light) -------------------------------- */
  --branco:            #FFFFFF;
  --fundo:             #F5F7FA;
  --borda:             #E5E7EB;
  --borda-forte:       #D1D5DB;
  --texto:             #111827;
  --texto-secundario:  #4B5563;
  --texto-suave:       #374151;
  --texto-fraco:       #9CA3AF;

  /* ---- Estados --------------------------------------------------------- */
  --verde:            #16A34A;   /* toggle ligado, Padrao_Toggle_OnOff */
  --verde-suave:      #ECFDF3;
  --ambar:            #D97706;
  --ambar-suave:      #FFFBEB;
  --vermelho:         #DC2626;
  --vermelho-suave:   #FEF2F2;
  --azul-info:        #2563EB;

  /* ---- Tipografia (Sistema_de_Estilos) --------------------------------- */
  --font:        'Inter', -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-titulo: 'Sora', 'Inter', sans-serif;

  --fs-xs: 12px;  --fs-sm: 13px;  --fs-base: 15px;
  --fs-lg: 16px;  --fs-xl: 20px;  --fs-2xl: 26px;

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

  /* ---- Raios (Padrao_Box_Card: NAO inventar valor solto) --------------- */
  --raio-sm:   8px;    /* controles: input, botao, pill */
  --raio:      12px;   /* cards, boxes, paineis */
  --raio-lg:   18px;   /* modais grandes */
  --raio-full: 9999px; /* pills e avatares circulares */

  /* ---- Sombras --------------------------------------------------------- */
  --sombra-sm: 0 1px 2px rgba(17, 24, 39, .06);
  --sombra:    0 4px 12px rgba(17, 24, 39, .10);
  --sombra-md: 0 8px 20px rgba(17, 24, 39, .12);
  --sombra-lg: 0 16px 40px rgba(17, 24, 39, .18);

  /* ---- Estrutura ------------------------------------------------------- */
  --sidebar-width: 248px;   /* Padrao_Menu_Sidebar */
  --topbar-h:      58px;    /* Padrao_Acao_Primaria_na_Topbar */
  --transicao:     .18s ease;

  /* ---- Alturas de controle --------------------------------------------- */
  --campo-h: 40px;   /* Padrao_Formulario: controles de 40px */
  --fu-h:    38px;   /* Padrao_Barra_de_Filtros: altura unica da barra */
}