/* ===========================================================
   IDENTIDADE VISUAL — NORDESTE LOCAÇÕES
   Tokens canônicos. Este arquivo é a fonte de verdade das cores,
   tipografia, espaçamento e raios. NÃO escreva hexadecimal solto
   em componente: se falta uma cor, ou existe um token para o papel
   dela, ou o papel é novo e o token nasce aqui.

   Todos os contrastes marcados abaixo são WCAG 2.1 medidos, não
   estimados. Ver referencias/tokens.md para as decisões.
   =========================================================== */
:root {
  /* ---------- Superfícies ---------- */
  --color-bg: #F5F5F5;              /* fundo da aplicação; fundo de botão secundário */
  --color-surface: #FFFFFF;         /* cards, header, container de tabela, modal */
  --color-surface-alt: #FAFAFA;     /* fundo de campo de formulário */
  --color-escuro: #262626;          /* superfície escura: capa/hero, cabeçalho de tabela,
                                       cabeçalho de modal neutro. Branco sobre ele = 15.1:1 */
  --color-sobre-escuro: #C9C9C9;    /* texto secundário SOBRE --color-escuro — 9.1:1 */
  --color-brilho: #ECECEC;          /* realce do esqueleto de carregamento (não textual) */
  --color-zebra: #FBFBFB;           /* faixa alternada de tabela impressa */

  /* ---------- Marca ---------- */
  --color-marca: #C0272D;           /* botão primário, ação destrutiva, faixa de destaque.
                                       5.9:1 sobre branco — passa para texto normal */
  --color-marca-hover: #A01F24;
  --color-marca-suave: #FDE8E8;     /* fundo de estado ativo (pill, KPI ativo) e de aviso de erro */

  /* ---------- Texto ---------- */
  --color-texto: #333333;           /* texto principal — 12.6:1 sobre branco */
  --color-texto-muted: #6B6B6B;     /* texto secundário, labels, hints — 5.3:1 sobre branco */
  --color-linha-suave: #9E9E9E;     /* ⚠️ NÃO TEXTUAL: só ícone decorativo, separador, seta.
                                       2.7:1 — reprova em WCAG para qualquer texto. */

  /* ---------- Estrutura ---------- */
  --color-borda: #E0E0E0;           /* borda de card, input, linha de tabela */
  --color-borda-forte: #C9C9C9;     /* borda que precisa se destacar (foco em fundo claro) */

  /* ---------- Semânticos — pares { cor, suave } ----------
     Regra do sinal: erro = a ação falhou · atenção = foi aceita mas exige
     conferência, ou o formulário precisa de ajuste · info = só informação.
     Usar o nível errado desgasta o sinal. */
  --color-sucesso: #2E7D32;
  --color-sucesso-suave: #E8F5E9;   /* 4.6:1 */
  --color-atencao: #C24400;
  --color-atencao-suave: #FFF3E0;   /* 4.7:1 */
  --color-info: #1565C0;
  --color-info-suave: #E3F2FD;      /* 5.0:1 */
  --color-nota: #8A6D1F;            /* destaque editorial ("repare nisto") */
  --color-nota-suave: #FFFBEA;      /* 4.7:1 */
  --color-nota-borda: #F0DFA0;

  /* ---------- Tipografia ----------
     DM Sans é a fonte da marca. Carregue-a no HTML:
     <link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&display=swap" rel="stylesheet">
     A pilha de fallback importa: em PDF/e-mail a fonte remota pode não carregar. */
  --fonte: "DM Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --fs-titulo: 22px;    /* h1 de página — peso 700 */
  --fs-seccao: 15px;    /* título de seção / cabeçalho de modal — 700 */
  --fs-kpi: 32px;       /* número de KPI — 800, letter-spacing -1px */
  --fs-base: 13px;      /* texto de conteúdo e tabela — 400/600 */
  --fs-pequeno: 12px;   /* botão secundário — 600 */
  --fs-mini: 11px;      /* label, cabeçalho de tabela, badge, hint — 600 uppercase */

  --lh-apertado: 1.25;  /* títulos */
  --lh-base: 1.55;      /* texto corrido */
  --lh-solto: 1.7;      /* parágrafo longo, material de leitura */

  /* ---------- Espaçamento (escala de 4) ---------- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px;
  --sp-4: 16px; --sp-6: 24px; --sp-8: 32px;

  /* ---------- Raios ---------- */
  --r-sm: 8px;    /* controles: botão, input, pill de filtro */
  --r-md: 12px;   /* blocos internos */
  --r-lg: 16px;   /* card, modal */
  --r-pill: 20px; /* badge arredondado */

  /* ---------- Sombras ---------- */
  --sombra-header: 0 1px 4px rgba(0, 0, 0, .08);
  --sombra-modal: 0 20px 60px rgba(0, 0, 0, .2);

  /* ---------- Camadas (z-index) ----------
     Escalonado de propósito: um modal empilhado sobre outro precisa de faixa
     livre entre eles. Não invente valor fora desta escala. */
  --z-header: 50;
  --z-modal: 100;
  --z-modal-empilhado: 150;
  --z-modal-critico: 300;
  --z-toast: 400;
  --z-dropdown: 9999;

  /* ---------- Larguras de quebra (breakpoints) ----------
     Registrados como token por documentação: `@media` NÃO lê custom property,
     então na media query o valor vai literal. Se mudar aqui, mude lá também. */
  --bp-mobile: 640px;   /* @media (max-width: 640px)  — coluna única */
  --bp-tablet: 960px;   /* @media (max-width: 960px)  — grades de 3 viram 2 */
  --largura-app: 1400px;
}

/* Cor da barra do navegador no mobile — declare também no HTML:
   <meta name="theme-color" content="#C0272D"> */