/*
 * Castor Bezerra - Design tokens (fase 1 do redesign).
 * Fonte canônica das variáveis de marca, semânticas, tipografia, elevação, raio e espaço.
 * Deve ser carregado ANTES de frontend.css / entrega.css.
 * Direção visual: docs/DESIGN-REDESIGN-CANDIDATURA.md (seção 2).
 */

:root {
  /* === MARCA — não mexer === */
  --cor-azul: #1A56C9;
  --cor-azul-escuro: #0F3A8C;
  --cor-azul-fundo: #0B2E7A;      /* nav, footer */
  --cor-dourado: #F2B705;
  --cor-dourado-escuro: #D99E00;
  --cor-fundo: #F4F7FC;            /* body */
  --cor-superficie: #FFFFFF;       /* cards */
  --cor-tinta: #0F1C3A;            /* texto principal */
  --cor-tinta-media: #4F5D7A;      /* texto secundário */
  --cor-tinta-leve: #8B96AC;       /* texto meta */
  --cor-borda: #E4E9F2;
  --cor-borda-forte: #CBD3E1;

  /* === SEMÂNTICAS — derivadas da marca === */
  --cor-sucesso: #0F7B5C;          /* verde profundo, não bootstrap */
  --cor-sucesso-fundo: #E6F4EE;
  --cor-atencao: #B8830A;          /* dourado escuro */
  --cor-atencao-fundo: #FCF4DD;
  --cor-erro: #B4292A;             /* vinho */
  --cor-erro-fundo: #FBE8E8;
  --cor-info: var(--cor-azul);
  --cor-info-fundo: #E8EEFB;

  /* === TIPOGRAFIA === */
  --fonte-titulo: 'Playfair Display', Georgia, serif;
  --fonte-texto: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --fonte-mono: 'JetBrains Mono', 'SF Mono', Menlo, monospace;

  /* === ELEVAÇÃO === */
  /* Sombras discretas; nada de box-shadow 0 20px 60px */
  --sombra-1: 0 1px 2px rgba(15, 28, 58, 0.04), 0 1px 1px rgba(15, 28, 58, 0.06);
  --sombra-2: 0 2px 6px rgba(15, 28, 58, 0.06), 0 2px 4px rgba(15, 28, 58, 0.04);
  --sombra-3: 0 4px 16px rgba(15, 28, 58, 0.08);
  --sombra-foco: 0 0 0 3px rgba(26, 86, 201, 0.18);

  /* === RAIO === */
  /* Máximo 16px fora de pills explícitas (badges/chips) */
  --raio-sm: 6px;
  --raio-md: 10px;
  --raio-lg: 14px;
  --raio-pill: 999px;

  /* === ESPAÇO === */
  --esp-1: 4px;  --esp-2: 8px;   --esp-3: 12px;
  --esp-4: 16px; --esp-5: 24px;  --esp-6: 32px;
  --esp-7: 48px; --esp-8: 64px;  --esp-9: 96px;
}

/* Reset mínimo que acompanha os tokens */
*, *::before, *::after { box-sizing: border-box; }
body { background: var(--cor-fundo); color: var(--cor-tinta); font-family: var(--fonte-texto); -webkit-font-smoothing: antialiased; }

/* Ícones base */
.ic { width: 1.25em; height: 1.25em; vertical-align: -0.2em; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; display: inline-block; flex-shrink: 0; }
.ic--sm { width: 1em; height: 1em; }
.ic--lg { width: 2em; height: 2em; }
.ic--xl { width: 2.75em; height: 2.75em; stroke-width: 1.25; }

/* Animação "live" — único pulse permitido simultâneo */
@keyframes pulseLive {
  0%, 100% { box-shadow: 0 0 0 0 rgba(26, 86, 201, 0.4); }
  70% { box-shadow: 0 0 0 10px rgba(26, 86, 201, 0); }
}
.dot-live { animation: pulseLive 2s infinite; }

/* Skeleton loader */
@keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
.skeleton { background: linear-gradient(90deg, #eef1f6 0%, #f7f9fc 50%, #eef1f6 100%); background-size: 200% 100%; animation: shimmer 1.4s linear infinite; border-radius: var(--raio-md); }