/* ============================================================
   TOKENS — IAO Instituto Avançado do Ouvido
   Fonte única de verdade: 01-paleta-de-cores-iao.txt (revisado)
                           01-tipografia-iao.txt
   ============================================================ */

:root {

  /* ----------------------------------------------------------
     PALETA PRINCIPAL DA MARCA
     ---------------------------------------------------------- */
  --iao-azul:        #1E5590;   /* Cor institucional principal */
  --iao-azul-escuro: #14375C;   /* Contraste, rodapé, títulos em fundo claro */
  --iao-off-white:   #FAF7F2;   /* Fundo principal das páginas */

  /* ----------------------------------------------------------
     CORES TÉCNICAS DA INTERFACE
     ---------------------------------------------------------- */
  --iao-branco:  #FFFFFF;   /* Campos, cards, branco puro */
  --iao-texto:   #2D3135;   /* Textos corridos */
  --iao-borda:   #D6C1A5;   /* Bordas discretas */
  --iao-erro:    #B33A3A;   /* Mensagens de erro */
  --iao-sucesso: #2F7D5A;   /* Mensagens de sucesso */

  /* ----------------------------------------------------------
     TIPOGRAFIA
     Fonte: Cormorant Garamond (títulos) + Inter (interface)
     ---------------------------------------------------------- */
  --font-titulo: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-corpo:  'Inter', Arial, Helvetica, sans-serif;

  /* Tamanhos — H1 */
  --h1-desktop: clamp(3rem, 5vw, 4rem);       /* 48–64px */
  --h1-mobile:  clamp(2.375rem, 8vw, 2.75rem); /* 38–44px */

  /* Tamanhos — H2 */
  --h2-desktop: clamp(2.375rem, 3.5vw, 2.875rem); /* 38–46px */
  --h2-mobile:  clamp(1.875rem, 6vw, 2.25rem);     /* 30–36px */

  /* Tamanhos — H3 */
  --h3-desktop: clamp(1.375rem, 2vw, 1.625rem); /* 22–26px */
  --h3-mobile:  clamp(1.25rem, 4vw, 1.4375rem); /* 20–23px */

  /* Tamanhos — H4 */
  --h4-size: clamp(1.125rem, 1.5vw, 1.3125rem); /* 18–21px */

  /* Textos */
  --text-hero:   clamp(1.0625rem, 2vw, 1.375rem); /* 17–22px */
  --text-body:   clamp(1rem, 1.2vw, 1.125rem);    /* 16–18px */
  --text-card:   clamp(0.9375rem, 1.2vw, 1.0625rem); /* 15–17px */
  --text-small:  clamp(0.875rem, 1vw, 0.9375rem); /* 14–15px */
  --text-legal:  clamp(0.9375rem, 1.1vw, 1rem);   /* 15–16px */

  /* Interface */
  --text-menu-desktop: clamp(0.875rem, 1vw, 1rem);   /* 14–16px */
  --text-menu-mobile:  clamp(1.125rem, 3vw, 1.25rem); /* 18–20px */
  --text-btn:   clamp(0.9375rem, 1.1vw, 1.0625rem); /* 15–17px */
  --text-footer: clamp(0.875rem, 1vw, 1rem);         /* 14–16px */
  --text-copyright: clamp(0.8125rem, 0.9vw, 0.875rem); /* 13–14px */

  /* Entrelinhas */
  --lh-titulo:  1.1;
  --lh-hero:    1.5;
  --lh-corpo:   1.7;
  --lh-card:    1.5;

  /* Larguras máximas de leitura */
  --max-leitura:      720px;  /* Textos corridos */
  --max-leitura-hero: 580px;  /* Textos do hero */

  /* ----------------------------------------------------------
     ESPAÇAMENTO
     ---------------------------------------------------------- */
  --space-xs:  0.5rem;   /*  8px */
  --space-sm:  1rem;     /* 16px */
  --space-md:  1.5rem;   /* 24px */
  --space-lg:  2.5rem;   /* 40px */
  --space-xl:  4rem;     /* 64px */
  --space-2xl: 6rem;     /* 96px */

  /* ----------------------------------------------------------
     LAYOUT
     ---------------------------------------------------------- */
  --container-max: 1240px;
  --container-pad: clamp(1.125rem, 5vw, 3rem); /* 18px a 48px */

  /* ----------------------------------------------------------
     COMPONENTES
     ---------------------------------------------------------- */
  --radius-sm:  6px;
  --radius-md:  10px;
  --radius-lg:  16px;

  --shadow-card: 0 1px 4px rgba(20, 55, 92, 0.06),
                 0 4px 16px rgba(20, 55, 92, 0.04);

  --transition-fast: 180ms ease;
  --transition-med:  280ms ease;

  /* ----------------------------------------------------------
     HEADER
     ---------------------------------------------------------- */
  --header-height: 80px;
}

/* Breakpoints de referência (usados nos media queries):
   Mobile:  < 768px
   Tablet:  768px – 1023px
   Desktop: ≥ 1024px
*/