/* === TOKENS DE DESIGN — FireProject ===
   Única fonte de verdade para cor, tipografia, espaçamento, raio, sombra e
   camadas usadas nas TELAS do sistema (páginas autenticadas renderizadas no
   navegador). Documentação completa em DESIGN_SYSTEM.md.

   NÃO usar este arquivo em templates lidos pelo motor de PDF (laudo_print.html,
   laudo_preview.html, receipt.html e afins) nem em static/css/buttons.css —
   o parser CSS do xhtml2pdf é CSS 2.1 e não entende variáveis (var()/:root).
   Esses arquivos continuam com valores literais, de propósito.

   Convenção de uso: `color: var(--color-primary);` em vez de `color: #0f3460;`
   direto. Editar um valor aqui muda em toda página que carregar este arquivo,
   sem precisar caçar e trocar em cada <style> local. */

:root {
  /* ---------- Cor: marca ---------- */
  --color-primary: #0f3460;
  --color-primary-hover: #0d2b52;
  --color-primary-active: #052847;
  --color-primary-light: #1f6feb; /* uso em gradiente/destaque; não usar como texto sobre fundo branco (contraste insuficiente) */
  --color-secondary: #475569;

  /* ---------- Cor: fundos e superfícies ---------- */
  --color-bg: #f8fafc;
  --color-bg-alt: #f1f5f9;
  --color-surface: #ffffff;

  /* ---------- Cor: texto ---------- */
  --color-text: #0f172a;
  --color-text-secondary: #64748b;
  --color-text-muted: #94a3b8;
  --color-text-on-primary: #ffffff;

  /* ---------- Cor: bordas ---------- */
  --color-border: #e2e8f0;
  --color-border-strong: #cbd5e1;

  /* ---------- Cor: semânticas (par sólido + par "badge" fundo claro/texto escuro) ---------- */
  --color-success: #16a34a;
  --color-success-bg: #dcfce7;
  --color-success-text: #166534;

  --color-danger: #dc2626;
  --color-danger-bg: #fee2e2;
  --color-danger-text: #991b1b;

  --color-warning: #f59e0b;
  --color-warning-bg: #fef3c7;
  --color-warning-text: #92400e;

  --color-info: #1f6feb;
  --color-info-bg: #dbeafe;
  --color-info-text: #1e40af;

  --color-disabled-bg: #e2e8f0;
  --color-disabled-text: #94a3b8;

  --color-focus-ring: #fbbf24; /* âmbar -- padrão já em uso (stat-card-link, quick-access-btn); não é o azul institucional de propósito, contraste melhor sobre fundo azul */

  /* ---------- Tipografia ---------- */
  --font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;

  --text-page-title: 2rem;       /* h1 — título principal da página */
  --text-section-title: 1.25rem; /* título de seção dentro da página */
  --text-card-title: 1.05rem;    /* título de card */
  --text-subtitle: 0.95rem;
  --text-body: 0.9rem;           /* texto comum */
  --text-auxiliary: 0.82rem;     /* texto auxiliar / legenda */
  --text-label: 0.85rem;         /* rótulo de campo */
  --text-button: 0.95rem;
  --text-caption: 0.78rem;
  --text-error: 0.82rem;
  --text-metric: 1.75rem;        /* valores numéricos importantes (KPI) */

  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  --line-height-base: 1.5;
  --line-height-tight: 1.25;

  /* ---------- Espaçamento (escala de 4px) ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;

  /* ---------- Raio de borda ---------- */
  --radius-sm: 6px;  /* elementos pequenos: badges retangulares, chips */
  --radius-md: 8px;  /* padrão: botões, inputs, itens de lista */
  --radius-lg: 12px; /* cards, modais, banners */
  --radius-pill: 999px; /* badges arredondados, avatares */

  /* ---------- Sombra (elevação) ---------- */
  --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.08);   /* card em repouso */
  --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.1);   /* card em hover, dropdown */
  --shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.18); /* modal, popover */
  --shadow-primary: 0 6px 18px rgba(13, 63, 174, 0.35); /* elementos sobre fundo azul institucional */

  /* ---------- Layout ---------- */
  --content-max-width: 1200px;
  --sidebar-width: 260px;
  --z-dropdown: 500;
  --z-overlay: 900;
  --z-modal: 1000;

  /* ---------- Transição ---------- */
  --transition-fast: 0.15s ease;
  --transition-base: 0.2s ease;
}

/* Breakpoints responsivos (referência — variável CSS não funciona dentro de
   @media, então o valor precisa ser digitado literal em cada media query;
   manter os mesmos 2 valores abaixo em vez de inventar um terceiro):
   - Tablet e abaixo: @media (max-width: 768px)  -- mesmo valor já usado por _sidebar.html, não mudar
   - Celular pequeno:  @media (max-width: 480px) */