/* ============================================================
   ATG Supply Chain — Design Tokens
   ------------------------------------------------------------
   Fonte única da verdade para cores, espaçamento, raio de borda,
   sombra/elevação, movimento e camadas (z-index) do projeto.
   Nenhum outro arquivo ou página deve redeclarar essas variáveis
   com valores diferentes — só consumir com var(--token).

   Ordem de carregamento recomendada em toda página nova:
     1) assets/css/tokens.css        (este arquivo — cores, espaço, raio, sombra)
     2) assets/css/typography.css    (fontes e escala de texto, usa os tokens daqui)
     3) assets/css/components.css    (botões, formulários, cards, badges, alertas...)
     4) assets/js/i18n.js            (se a página tiver textos em PT-BR/ES/EN)

   <link rel="stylesheet" href="assets/css/tokens.css">
   <link rel="stylesheet" href="assets/css/typography.css">
   <link rel="stylesheet" href="assets/css/components.css">
   ============================================================ */

:root{
  /* ---------- Cor — superfícies ---------- */
  --bg: #f2f2f2;         /* fundo da página */
  --bg-alt: #e8e9eb;     /* fundo alternativo (seções, listras) */
  --card: #ffffff;       /* fundo de cards, inputs, menus */
  --card-alt: #f7f8f9;   /* fundo de card em hover/estado elevado */
  --card-border: #dee1e4;/* borda padrão de cards/inputs/divisores */
  --overlay: rgba(5,6,10,.65); /* véu sobre imagem/vídeo, scrims — sempre escuro, independe do tema */

  /* ---------- Cor — texto ---------- */
  --ink: #14181d;    /* texto principal sobre fundo claro */
  --muted: #5b6169;  /* texto secundário */
  --muted-2: #5f656d;/* texto terciário — 4.5:1+ sobre --card/--bg (WCAG AA). Achado de auditoria (2026-09-16): o tom anterior (#6c7178) dava só 4,39:1 sobre --bg, abaixo do mínimo — este tom dá ~5,3:1 sobre --bg e ~5,9:1 sobre --card. */
  --muted-3: #8b9099;/* tom claro reservado só pra placeholder de input — não é texto real, não precisa do mesmo contraste */
  --light: #ffffff;  /* branco de apoio (raramente usado puro) */

  /* ---------- Cor — marca e estado ---------- */
  --accent: #007dc3;        /* azul da marca — CTAs, destaque, foco */
  --accent-dim: #045a8d;    /* variação escura do accent (gradientes, ícones) */
  --accent-hover: #1f97d9;  /* accent em hover */
  --success: #1f9d63;
  --warning: #b9791c;
  --danger: #d23c56;
  --info: #4a7fb0;

  /* ---------- Espaçamento — escala base 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;
  --space-16: 64px;
  --space-20: 80px;

  /* ---------- Raio de borda ---------- */
  --radius-sm: 8px;    /* inputs pequenos, chips */
  --radius-md: 12px;   /* inputs, botões outline, menus */
  --radius-lg: 16px;   /* cards de conteúdo */
  --radius-xl: 22px;   /* cards grandes, painéis */
  --radius-full: 999px;/* pills, avatares, botão primário */
  --radius: var(--radius-xl); /* alias legado — mantido pelas páginas já publicadas */

  /* ---------- Sombra / elevação ---------- */
  --shadow-sm: 0 2px 8px rgba(0,0,0,.25);
  --shadow-md: 0 8px 24px rgba(0,0,0,.35);
  --shadow-lg: 0 16px 40px rgba(0,0,0,.45);
  --shadow-focus: 0 0 0 3px rgba(0,125,195,.35); /* anel de foco visível (acessibilidade) */

  /* ---------- Movimento ---------- */
  --ease-standard: cubic-bezier(.4,0,.2,1);
  --duration-fast: 150ms;
  --duration-base: 200ms;
  --duration-slow: 400ms;

  /* ---------- Camadas (z-index) ---------- */
  --z-dropdown: 50;
  --z-switcher: 80;
  --z-modal: 100;
  --z-toast: 120;
}

/* ---------- Breakpoints de referência ----------
   CSS não permite variáveis dentro de @media — use os valores
   diretamente nas queries, mas sempre estes três pontos de corte
   pra manter tudo consistente entre páginas:
     até 460px   → celular
     até 980px   → tablet / coluna única
     acima disso → desktop
   ------------------------------------------------------------ */

/* ---------- Acessibilidade — foco visível global ----------
   Nunca remova o anel de foco sem repor um equivalente. Todo
   elemento interativo (botão, link, input, item de menu) herda
   este estilo automaticamente ao usar teclado. */
:focus-visible{
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}