/* ============================================================
   ENJATEC SISTEMA RDO — DESIGN TOKENS
   ============================================================
   Arquivo central do design system.
   Todas as cores, fontes e espaçamentos do sistema partem daqui.
   NÃO usar cores hardcoded em outros arquivos — sempre referenciar
   estas variáveis via var(--token-name).
   ============================================================ */

:root {
  /* -----------------------------------------------------------
     CORES INSTITUCIONAIS ENJATEC
     Extraídas diretamente do logotipo oficial
     ----------------------------------------------------------- */
  --color-primary:       #0B3C4D;  /* Azul petróleo da logo */
  --color-primary-dark:  #082E3B;  /* Hover / estado ativo */
  --color-primary-light: #1D6B86;  /* Links, subtítulos, decorativo */
  --color-primary-soft:  #EFF3F5;  /* Fundos sutis, cards, linhas pares */

  /* -----------------------------------------------------------
     CORES SEMÂNTICAS
     ----------------------------------------------------------- */
  --color-accent:  #E67E22;  /* Destaque industrial (laranja) */
  --color-success: #27AE60;  /* Aprovado, confirmação */
  --color-warning: #F39C12;  /* Fora de escopo, atenção intermediária */
  --color-danger:  #C0392B;  /* Rejeitado, erro, crítico */

  /* -----------------------------------------------------------
     NEUTROS
     ----------------------------------------------------------- */
  --color-text:           #1A1A1A;
  --color-text-secondary: #595959;
  --color-text-muted:     #8A8A8A;
  --color-border:         #D0D5DA;
  --color-border-soft:    #E5E9ED;
  --color-bg-page:        #F5F7F9;
  --color-white:          #FFFFFF;

  /* -----------------------------------------------------------
     TIPOGRAFIA
     Inter = UI limpa e técnica; IBM Plex Mono = códigos/números técnicos
     ----------------------------------------------------------- */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', 'Courier New', ui-monospace, monospace;

  /* Escala tipográfica */
  --fs-xs:   11px;  /* Labels, metadados, breadcrumbs */
  --fs-sm:   12px;  /* Captions, legendas */
  --fs-base: 14px;  /* Corpo de texto padrão */
  --fs-md:   15px;  /* Textos de destaque moderado */
  --fs-lg:   17px;  /* Subtítulos de seção */
  --fs-xl:   22px;  /* Títulos de cards */
  --fs-2xl:  28px;  /* Títulos de página */
  --fs-3xl:  32px;  /* Títulos hero em páginas principais */

  /* Pesos */
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semi:    600;
  --fw-bold:    700;
  --fw-black:   800;

  /* -----------------------------------------------------------
     ESPAÇAMENTO
     Escala baseada em múltiplos de 4px — consistência visual
     ----------------------------------------------------------- */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-7:  32px;
  --sp-8:  40px;
  --sp-9:  56px;
  --sp-10: 72px;

  /* -----------------------------------------------------------
     RAIOS DE BORDA
     ----------------------------------------------------------- */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 10px;
  --radius-2xl: 14px;
  --radius-full: 9999px;

  /* -----------------------------------------------------------
     SOMBRAS
     ----------------------------------------------------------- */
  --shadow-sm: 0 1px 2px rgba(11, 60, 77, 0.05);
  --shadow-md: 0 2px 8px rgba(11, 60, 77, 0.08);
  --shadow-lg: 0 8px 20px rgba(11, 60, 77, 0.12);
  --shadow-xl: 0 20px 40px rgba(11, 60, 77, 0.15);

  /* -----------------------------------------------------------
     TRANSIÇÕES
     ----------------------------------------------------------- */
  --transition-fast: 0.15s ease;
  --transition-base: 0.2s ease;
  --transition-slow: 0.3s ease;

  /* -----------------------------------------------------------
     LAYOUT
     ----------------------------------------------------------- */
  --sidebar-width: 260px;
  --header-height: 64px;
  --max-content-width: 1400px;

  /* -----------------------------------------------------------
     Z-INDEX
     ----------------------------------------------------------- */
  --z-dropdown: 10;
  --z-sticky: 20;
  --z-modal-backdrop: 40;
  --z-modal: 50;
  --z-notification: 60;
}