/*
  TOKENS.CSS — Hospital do Cerrado
  Versão em código do MIDIA-KIT.md. Não digitar cor, fonte, espaçamento
  ou raio "no olho" em nenhum outro arquivo CSS — sempre usar estas variáveis.
  Consultar MIDIA-KIT.md para o significado/uso de cada token.
*/

:root {
  /* ---------- Cores de marca ---------- */
  --cor-laranja: #D57A30;
  --cor-laranja-hover: #BD6A26;
  --cor-laranja-escuro: #A5571A;  /* fundo da faixa CTA — garante contraste AA com texto branco */
  --cor-laranja-texto: #A5571A;   /* texto laranja PEQUENO (links, eyebrow) sobre fundo claro — 5,3:1 */
  --cor-laranja-50: #FBF2EA;      /* fundo de ícones e realces suaves */
  --cor-laranja-100: #F7E4D6;     /* bordas/hover sobre fundos claros */
  --cor-amarelo: #F2CB13;
  --cor-cinza-grafite: #4B4B4A;

  /* ---------- Escala de neutros ---------- */
  --cor-branco: #FFFFFF;
  --cor-neutro-50: #F7F5F2;
  --cor-neutro-100: #EFEBE6;
  --cor-neutro-200: #E4E1DC;
  --cor-neutro-400: #9B9997;
  --cor-neutro-600: #6E6E6D;
  --cor-neutro-700: #4B4B4A; /* = --cor-cinza-grafite */
  --cor-neutro-900: #2B2A28;

  /* ---------- Cores semânticas ---------- */
  --cor-sucesso: #2E7D32;
  --cor-erro: #C62828;
  --cor-atencao: var(--cor-amarelo);
  --cor-whatsapp: #25D366;         /* verde oficial — só no ícone sobre fundo claro */
  --cor-whatsapp-escuro: #0E8442;  /* fundo de botões com texto branco (4,8:1) */
  --cor-whatsapp-hover: #0B6E37;

  /* ---------- Texto ---------- */
  --cor-texto-principal: var(--cor-neutro-700);
  --cor-texto-secundario: var(--cor-neutro-600);
  --cor-texto-terciario: var(--cor-neutro-400);
  --cor-texto-sobre-escuro: var(--cor-branco);

  /* ---------- Tipografia ---------- */
  --fonte-titulo: "Manrope", "Segoe UI", Arial, sans-serif;
  --fonte-corpo: "Inter", "Segoe UI", Arial, sans-serif;

  --peso-regular: 400;
  --peso-medium: 500;
  --peso-semibold: 600;
  --peso-bold: 700;
  --peso-extrabold: 800;

  /* Tamanhos — mobile-first (ajustados em @media abaixo) */
  --texto-eyebrow: 0.875rem;   /* 14px */
  --texto-display: 2.125rem;   /* 34px */
  --texto-h1: 2rem;            /* 32px */
  --texto-h2: 1.625rem;        /* 26px */
  --texto-h3: 1.25rem;         /* 20px */
  --texto-h4: 1.125rem;        /* 18px */
  --texto-lead: 1.0625rem;     /* 17px */
  --texto-corpo: 1rem;         /* 16px */
  --texto-pequeno: 0.875rem;   /* 14px */
  --texto-caption: 0.75rem;    /* 12px */

  /* ---------- Espaçamento (base 8px) ---------- */
  --espaco-1: 0.25rem;  /* 4px */
  --espaco-2: 0.5rem;   /* 8px */
  --espaco-3: 0.75rem;  /* 12px */
  --espaco-4: 1rem;     /* 16px */
  --espaco-5: 1.5rem;   /* 24px */
  --espaco-6: 2rem;     /* 32px */
  --espaco-7: 2.5rem;   /* 40px */
  --espaco-8: 3rem;     /* 48px */
  --espaco-9: 4rem;     /* 64px */
  --espaco-10: 5rem;    /* 80px */
  --espaco-11: 6rem;    /* 96px */
  --espaco-12: 8rem;    /* 128px */

  /* Atalhos semânticos de espaçamento */
  --espaco-secao: var(--espaco-8);       /* mobile: 48px */
  --espaco-card: var(--espaco-5);        /* mobile: 24px */
  --gutter-grid: var(--espaco-4);        /* mobile: 16px */

  /* ---------- Raio de borda ---------- */
  --raio-sm: 8px;
  --raio-md: 12px;
  --raio-lg: 16px;
  --raio-xl: 24px;
  --raio-full: 999px;

  /* ---------- Sombras ---------- */
  --sombra-sm: 0 1px 3px rgba(43, 42, 40, 0.08);
  --sombra-md: 0 4px 16px rgba(43, 42, 40, 0.08);
  --sombra-lg: 0 12px 32px rgba(43, 42, 40, 0.14);

  /* ---------- Layout ---------- */
  --largura-container: 1240px;
  --padding-container: var(--espaco-5); /* 24px mobile */

  /* ---------- Transições ---------- */
  --transicao-rapida: 0.15s ease;
  --transicao-padrao: 0.2s ease;
  --transicao-lenta: 0.4s ease;

  /* ---------- Breakpoints (referência — usar nos media queries) ----------
     sm: 576px | md: 768px | lg: 992px | xl: 1280px
     (custom properties não funcionam dentro de @media; manter só como
     documentação e repetir os valores diretamente nas media queries) */
}

/* Escala tipográfica maior em telas médias/grandes (>= 768px) */
@media (min-width: 768px) {
  :root {
    --texto-eyebrow: 0.875rem;   /* 14px */
    --texto-display: 3.5rem;     /* 56px */
    --texto-h1: 2.75rem;         /* 44px */
    --texto-h2: 2.25rem;         /* 36px */
    --texto-h3: 1.5rem;          /* 24px */
    --texto-h4: 1.25rem;         /* 20px */
    --texto-lead: 1.125rem;      /* 18px */
    --texto-corpo: 1rem;         /* 16px */

    --espaco-secao: var(--espaco-11);  /* 96px */
    --espaco-card: var(--espaco-6);    /* 32px */
    --gutter-grid: var(--espaco-6);    /* 32px */
    --padding-container: var(--espaco-6); /* 32px */
  }
}