/*
 * Design Tokens - Hygienize Child
 *
 * Todas as variaveis do Design System vivem aqui. Nenhum outro
 * arquivo deve declarar cores, espacamentos, raios, sombras ou
 * transicoes "soltos" - sempre referenciar estas custom properties,
 * para manter o site consistente e facil de ajustar em um unico
 * lugar (ex.: trocar a cor primaria do projeto inteiro).
 */

:root {
  /* Cores */
  --hyg-color-primary: #2F5EA8;
  --hyg-color-secondary: #123B73;
  --hyg-color-background: #FFFFFF;
  --hyg-color-surface: #F5F7FA;
  --hyg-color-text: #1F2937;
  --hyg-color-text-muted: #6B7280;
  --hyg-color-border: #E5E7EB;
  --hyg-color-on-primary: #FFFFFF;
  --hyg-color-success: #16A34A;
  --hyg-color-warning: #F59E0B;
  --hyg-color-error: #DC2626;

  /* Tipografia */
  --hyg-font-family-base: 'Poppins', sans-serif;
  --hyg-font-size-h1: clamp(2.25rem, 1.65rem + 2.6vw, 3.25rem);
  --hyg-font-size-h2: clamp(1.75rem, 1.5rem + 1.1vw, 2.25rem);
  --hyg-font-size-h3: 1.5rem;
  --hyg-font-size-h4: 1.25rem;
  --hyg-font-size-body: 1rem;
  --hyg-font-size-lead: 1.125rem;
  --hyg-font-size-small: 0.875rem;
  --hyg-line-height-heading: 1.15;
  --hyg-line-height-body: 1.6;
  --hyg-letter-spacing-heading: -0.02em;
  --hyg-letter-spacing-body: normal;
  --hyg-font-weight-regular: 400;
  --hyg-font-weight-medium: 500;
  --hyg-font-weight-semibold: 600;
  --hyg-font-weight-bold: 700;

  /* Espacamento (escala base 4px) */
  --hyg-space-1: 4px;
  --hyg-space-2: 8px;
  --hyg-space-3: 12px;
  --hyg-space-4: 16px;
  --hyg-space-5: 24px;
  --hyg-space-6: 32px;
  --hyg-space-7: 48px;
  --hyg-space-8: 64px;

  /* Border radius */
  --hyg-radius-sm: 4px;
  --hyg-radius-md: 8px;
  --hyg-radius-lg: 16px;
  --hyg-radius-full: 9999px;

  /* Sombras */
  --hyg-shadow-sm: 0 1px 2px rgba(17, 24, 39, 0.06);
  --hyg-shadow-md: 0 4px 12px rgba(17, 24, 39, 0.10);
  --hyg-shadow-lg: 0 12px 32px rgba(17, 24, 39, 0.14);

  /* Transicoes */
  --hyg-transition-fast: 150ms ease;
  --hyg-transition-base: 250ms ease;
  --hyg-transition-slow: 400ms ease;

  /* Container */
  --hyg-container-max-width: 1200px;
  --hyg-container-padding: var(--hyg-space-4);
}

/*
 * Breakpoints (referencia para uso manual em media queries).
 * Custom properties do CSS nao podem ser usadas dentro de @media,
 * entao os valores abaixo sao documentacao - use os numeros
 * diretamente. Escala mobile-first (min-width):
 *
 *   sm: 576px
 *   md: 768px
 *   lg: 992px
 *   xl: 1200px
 */