/* Ponto Eletronico - Vibbe Plus
   Tokens oficiais da identidade Vibbe+ (skill padrao-ui-vibbe). Arquivo unico
   de cores, fontes, espacos e raios, carregado pela tela do funcionario e pelo
   painel ANTES de estilo.css / painel.css. Nao espalhar cor solta pelo codigo:
   crie ou reuse um token aqui.

   Fontes Poppins (titulos) e Inter (texto) baixadas do Google Fonts e servidas
   pelo proprio app (public/fonts), porque a CSP do servidor so permite
   recursos do mesmo dominio (style-src/font-src 'self'). Licenca OFL.

   Contraste (WCAG AA, calculado): texto #F2F4F7 em superficie 16:1; texto
   secundario 7:1; cores semanticas sobre o fundo -fundo de cada uma >= 5,9:1;
   texto escuro (#090C1D) nos botoes de batida >= 7:1. */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/inter-latin.woff2') format('woff2');
}

@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/poppins-600-latin.woff2') format('woff2');
}

@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/poppins-700-latin.woff2') format('woff2');
}

:root {
  /* Marca */
  --cor-fundo: #090C1D;            /* marinho quase preto: fundo de tudo */
  --cor-laranja: #F5781E;          /* acao principal */
  --cor-laranja-claro: #FAA32F;    /* destaque, hover */
  --cor-cinza: #E6EAED;            /* superficies claras */

  /* Superficies e linhas do tema escuro */
  --cor-superficie: #121730;       /* cartoes, teclas, barras */
  --cor-superficie-2: #1A2142;     /* bloco dentro de cartao, hover */
  --cor-borda: #2A3252;
  --cor-inativo: #3A4256;          /* "+" do PIN ainda vazio (decorativo) */
  --cor-sobreposicao: rgba(9, 12, 29, 0.85); /* fundo atras do modal */
  --cor-hover-linha: rgba(255, 255, 255, 0.04);
  --cor-anel-foco: rgba(245, 120, 30, 0.35);

  /* Texto */
  --cor-texto: #F2F4F7;
  --cor-texto-secundario: #9AA3BA;
  --cor-texto-sobre-cor: #090C1D;  /* texto em botao laranja/colorido */

  /* Semanticas (tema escuro). A versao -fundo e o fundo de selo/aviso. */
  --cor-sucesso: #4ADE80;
  --cor-sucesso-fundo: #0F2A1C;
  --cor-aviso: #FBBF24;
  --cor-aviso-fundo: #2E2410;
  --cor-perigo: #F87171;
  --cor-perigo-fundo: #351718;
  --cor-info: #60A5FA;
  --cor-info-fundo: #11203D;

  /* Botoes de batida (fundo forte + texto escuro, todos >= 7:1) */
  --cor-batida-entrada: #22C55E;
  --cor-batida-saida-almoco: #F5781E;
  --cor-batida-retorno: #60A5FA;
  --cor-batida-saida: #F87171;

  /* Tipografia */
  --fonte-titulo: 'Poppins', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  --fonte-texto: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  --texto-xs: 0.75rem;
  --texto-sm: 0.875rem;
  --texto-md: 1rem;
  --texto-lg: 1.125rem;
  --texto-xl: 1.375rem;
  --texto-2xl: 1.75rem;

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

  /* Raios */
  --raio-sm: 8px;
  --raio-md: 12px;
  --raio-lg: 16px;
  --raio-pilula: 999px;

  /* Sombras */
  --sombra-1: 0 2px 6px rgba(0, 0, 0, 0.35);
  --sombra-2: 0 3px 8px rgba(0, 0, 0, 0.4);
  --sombra-3: 0 6px 24px rgba(0, 0, 0, 0.4);

  /* Area minima de toque */
  --alvo-toque: 44px;
}

/* Texto so para leitor de tela (ex.: "2 de 4 digitos" do PIN). */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Base comum de acessibilidade ---------- */

h1, h2, h3, h4 {
  font-family: var(--fonte-titulo);
}

/* Anel laranja so para quem navega pelo teclado. */
:focus-visible {
  outline: 3px solid var(--cor-laranja);
  outline-offset: 2px;
}

button,
select,
input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]) {
  min-height: var(--alvo-toque);
}

table,
time,
.numeros {
  font-variant-numeric: tabular-nums;
}