/* ============================================================
   Hypes Co-Pilot — Design Tokens (fonte única de verdade)
   Tema: SaaS light premium · neutros quentes · primária coral
   Documentação completa: DESIGN.md na raiz do repositório.
   Este arquivo deve ser carregado ANTES de styles.css.
   ============================================================ */

:root {
  /* ---------- Neutros (base quente) ---------- */
  --bg: #F6F4F1;              /* fundo da página — distante do branco do card */
  --surface: #FFFFFF;         /* superfície de cards */
  --surface-2: #F6F4F1;       /* superfície secundária (hover, wells) */
  --surface-3: #EDE9E4;       /* trilhos/áreas rebaixadas sobre o bg */
  --text-primary: #1A1A1A;
  --text-secondary: #6B6862;
  --text-muted: #A8A49D;
  --border: #F0EDE9;          /* quase imperceptível — separação vem da sombra */
  --border-strong: #E3DFDA;   /* inputs e divisores que precisam de presença */

  /* ---------- Primária (coral) ---------- */
  --accent: #FF6B4A;
  --accent-strong: #F1502C;
  --accent-soft: #FFF0EB;
  --accent-gradient: linear-gradient(135deg, #FF7A59 0%, #FF9A5A 100%);

  /* ---------- Acentos pastel {soft, strong} ---------- */
  /* Chips de ícone, categorias, badges decorativos.
     NÃO usar para significado positivo/negativo — para isso, semânticas. */
  --c-orange: #FF7A59;  --c-orange-soft: #FFF0EB;
  --c-blue:   #4D9BFF;  --c-blue-soft:   #EAF3FF;
  --c-purple: #8B7BFF;  --c-purple-soft: #EFECFF;
  --c-yellow: #F5B73D;  --c-yellow-soft: #FEF5E3;
  --c-mint:   #2BC4A0;  --c-mint-soft:   #E3F8F2;
  /* Aliases legados (telas antigas) */
  --c-pink:   #FF5E8A;  --c-pink-soft:   #FFEEF3;
  --c-red:    #C0392B;  --c-red-soft:    #FDEEEC;

  /* ---------- Semânticas {fundo tingido, texto forte} ---------- */
  /* Pares validados WCAG AA (>= 4.5:1 texto normal sobre o fundo do par). */
  --ok-bg:      #EAF7EF;  --ok-fg:      #1D7A46;   /* 4.9:1 */
  --bad-bg:     #FDEEEC;  --bad-fg:     #C0392B;   /* 4.8:1 */
  --warn-bg:    #FFF6E5;  --warn-fg:    #8C5E0A;   /* 5.2:1 — #B7791F reprova (3.4:1) */
  --neutral-bg: #F6F4F1;  --neutral-fg: #6B6862;   /* 4.7:1 */

  /* Variantes fortes (fundo saturado + texto branco) — extremos de escala */
  --ok-solid:  #1D7A46;   /* branco sobre: 5.3:1 */
  --bad-solid: #C0392B;   /* branco sobre: 5.4:1 */

  /* ---------- Escala de heat (tabela de campanha, 5 níveis) ---------- */
  /* Padrão "truestats": fundo tingido pastel + texto na cor forte.
     Sem blocos sólidos. Grupos verde/âmbar/vermelho distinguíveis num
     relance; dentro do grupo, a profundidade do tint separa os níveis.
     Todos os pares >= 4.5:1 (AA). */
  --heat-5-bg: #E3F4EA; --heat-5-fg: #1D7A46;   /* >=100% · verde profundo · 4.7:1 */
  --heat-4-bg: #F0FAF4; --heat-4-fg: #1D7A46;   /* 90–99% · verde leve     · 5.0:1 */
  --heat-3-bg: #FFF6E5; --heat-3-fg: #8C5E0A;   /* 70–89% · âmbar          · 5.2:1 */
  --heat-2-bg: #FEF2EF; --heat-2-fg: #C0392B;   /* 50–69% · vermelho leve  · 5.0:1 */
  --heat-1-bg: #FDE5E1; --heat-1-fg: #A93226;   /* <50%   · vermelho prof. · 5.5:1 */

  /* ---------- Sombras (reais e difusas, nunca duras) ---------- */
  --shadow-sm: 0 1px 3px rgba(26, 22, 18, 0.05);
  --shadow-md: 0 4px 16px rgba(26, 22, 18, 0.06), 0 1px 3px rgba(26, 22, 18, 0.05);
  --shadow-lg: 0 12px 32px rgba(26, 22, 18, 0.10);
  --glow-accent: 0 4px 14px rgba(255, 107, 74, 0.35);  /* botão primário */

  /* ---------- Raios ---------- */
  --r-input: 12px;      /* inputs, chips, células */
  --r-card: 16px;       /* cards */
  --r-container: 20px;  /* containers grandes, modais */
  --r-pill: 999px;      /* botões, badges, pílulas */
  /* Aliases legados */
  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 20px;

  /* ---------- Espaçamento (escala 4px) ---------- */
  --sp-1: 4px;  --sp-2: 8px;   --sp-3: 12px; --sp-4: 16px; --sp-5: 20px;
  --sp-6: 24px; --sp-7: 28px;  --sp-8: 32px; --sp-9: 36px; --sp-10: 40px;

  /* ---------- Tipografia ---------- */
  --font: 'Plus Jakarta Sans', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-title: 700;
  --fw-bold: 800;
  /* Escala completa */
  --fs-page-title: 30px;   /* h1 de página · 800 · ls -0.03em */
  --fs-section: 18px;      /* títulos de seção · 700 · ls -0.01em */
  --fs-kpi: 30px;          /* valor de KPI · 800 · ls -0.5px · tabular-nums */
  --fs-body: 14px;         /* corpo · 500 */
  --fs-label: 13px;        /* labels e botões · 600 */
  --fs-caption: 12px;      /* legendas, deltas, labels de KPI · 600 */
  --fs-micro: 11px;        /* subtextos, th de tabela · 600 */
  /* Tratamentos específicos */
  --ls-kpi: -0.5px;                 /* valor de KPI */
  --ls-label-caps: 0.6px;           /* labels uppercase (KPI, th) */

  /* ---------- Ritmo de layout (grid 8px) ---------- */
  --card-pad: 22px;        /* padding interno de cards (20–24) */
  --grid-gap: 16px;        /* gap entre cards */
  --ico-size: 19px;        /* ícones Lucide na UI (18–20px, stroke 1.75) */

  /* ---------- Motion ---------- */
  --t-fast: 150ms ease;
  --t-med: 200ms ease;
  --anim-in: 250ms;        /* fade+slide de entrada */
  --anim-stagger: 40ms;    /* atraso entre cards irmãos */
}