/* ==========================================================================
   KITZER — TOKENS DE DESIGN
   Único lugar para mexer no visual: cores, fontes, espaçamentos, raios e sombras.
   O styles.css só usa as variáveis abaixo; não há valores soltos por lá.
   ========================================================================== */

:root {
  /* ---------- Cores da marca ----------
     Amarelo, azul e laranja vêm do código de cores de medicamentos
     (baseado na ISO 26825). Não trocar a matiz, só ajustes finos de tom. */
  --kz-navy: #0E2C4C;
  --kz-navy-700: #0A2139;       /* navy mais escuro (hover, rodapé) */
  --kz-navy-600: #163A60;       /* navy mais claro (cartões sobre navy) */
  --kz-yellow: #F5B700;
  --kz-yellow-600: #DDA500;     /* hover do botão amarelo */
  --kz-blue: #1864AB;
  --kz-orange: #D9480F;
  --kz-white: #FFFFFF;
  --kz-gray-50: #F4F6F8;
  --kz-gray-100: #E6EAEE;       /* bordas e divisores */
  --kz-gray-500: #5A6570;
  --kz-whatsapp: #25D366;       /* somente no ícone do WhatsApp */

  /* ---------- Legenda de cores por classe (baseada na ISO 26825) ---------- */
  --iso-inducao: var(--kz-yellow);
  --iso-opioides: var(--kz-blue);
  --iso-benzodiazepinicos: var(--kz-orange);
  --iso-anticolinergicos: #6BA539;
  --iso-vasopressores: #8E6BBF;
  --iso-anestesicos-locais: #9AA3AB;
  --iso-antagonistas-listra: var(--kz-navy);

  /* ---------- Cores semânticas ---------- */
  --color-text: var(--kz-navy);
  --color-text-muted: var(--kz-gray-500);
  --color-text-on-dark: var(--kz-white);
  --color-text-on-dark-muted: rgba(255, 255, 255, 0.82);
  --color-bg: var(--kz-white);
  --color-bg-alt: var(--kz-gray-50);
  --color-bg-dark: var(--kz-navy);
  --color-border: var(--kz-gray-100);
  --color-link: var(--kz-blue);
  --color-focus: var(--kz-yellow);
  --color-placeholder: var(--kz-gray-50);

  /* ---------- Tipografia ---------- */
  --font-family: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;
  --font-weight-heavy: 800;

  --font-size-xs: 0.8125rem;   /* 13px */
  --font-size-sm: 0.9375rem;   /* 15px */
  --font-size-base: 1rem;      /* 16px */
  --font-size-md: 1.125rem;    /* 18px */
  --font-size-lg: 1.25rem;     /* 20px */
  --font-size-xl: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);        /* títulos de seção */
  --font-size-2xl: clamp(1.75rem, 1.3rem + 1.8vw, 2.5rem);
  --font-size-hero: clamp(2rem, 1.4rem + 2.8vw, 3.25rem);     /* título do hero */

  --line-height-body: 1.6;
  --line-height-heading: 1.2;
  --letter-spacing-wordmark: 0.14em;
  --letter-spacing-eyebrow: 0.08em;

  /* ---------- Espaçamentos (escala de 4 px) ---------- */
  --space-1: 0.25rem;  /* 4 */
  --space-2: 0.5rem;   /* 8 */
  --space-3: 0.75rem;  /* 12 */
  --space-4: 1rem;     /* 16 */
  --space-5: 1.5rem;   /* 24 */
  --space-6: 2rem;     /* 32 */
  --space-7: 3rem;     /* 48 */
  --space-8: 4rem;     /* 64 */
  --space-9: 6rem;     /* 96 */

  --section-padding: clamp(var(--space-7), 8vw, var(--space-9));
  --container-max: 1160px;
  --container-gutter: var(--space-4);
  --header-height: 4.25rem;

  /* ---------- Raios ---------- */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  /* ---------- Sombras ---------- */
  --shadow-sm: 0 1px 2px rgba(14, 44, 76, 0.08);
  --shadow-md: 0 6px 20px rgba(14, 44, 76, 0.10);
  --shadow-lg: 0 16px 40px rgba(14, 44, 76, 0.18);

  /* ---------- Movimento ---------- */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --reveal-distance: 16px;

  /* ---------- Camadas ---------- */
  --z-header: 100;
  --z-float: 110;
  --z-toast: 120;
  --z-modal: 200;
}

@media (min-width: 960px) {
  :root {
    --container-gutter: var(--space-6);
    --header-height: 4.75rem;
  }
}