/**
 * Design tokens — Ágape Institucional
 *
 * A paleta parte das cores de marca já usadas no site (#046BB0, #00B1D3,
 * #85CAE1, #93D2FF) e acrescenta uma faixa de azul-marinho profundo que dá
 * o peso institucional que faltava, além de neutros frios para respiro.
 */

:root {
  /* ---------------------------------------------------------------- marca */
  --c-navy-950: #041E33;
  --c-navy-900: #062A47;
  --c-navy-800: #0A3B62;
  --c-navy-700: #0B4E80;

  /* Ciano da marca — cor dominante do site.
   *
   * #00B1D3 tem contraste 2,55:1 com o branco, então NÃO serve para texto sobre
   * fundo claro nem pode receber texto branco. Ele é usado como preenchimento
   * (botões, ícones, faixas), sempre com texto escuro por cima. Para texto e
   * ícones finos sobre fundo claro existem as variantes -700 e -800, que são o
   * mesmo matiz escurecido até passar no WCAG AA. */
  --c-primary: #00B1D3;          /* preenchimento (texto escuro por cima) */
  --c-primary-600: #009BBB;      /* hover de preenchimento */
  --c-primary-700: #00788F;      /* texto/ícone sobre branco — 5,1:1 */
  --c-primary-800: #00697D;      /* texto sobre --c-primary-100 — 5,6:1 */
  --c-primary-100: #DFF6FB;
  --c-primary-200: #B7E9F2;      /* fundo de ícone com mais presença que -100 */
  --c-primary-050: #F2FBFD;

  /* atalho semântico: tudo que é TEXTO na cor da marca usa este token */
  --c-link: var(--c-primary-700);

  /* Azul institucional herdado — no papel de realce secundário.
   * Aceita texto branco (5,6:1). */
  --c-accent: #046BB0;
  --c-accent-600: #035C98;
  --c-accent-100: #E3F0FA;

  --c-sky-300: #85CAE1;
  --c-sky-200: #93D2FF;

  /* faixas herdadas de missão / visão / valores */
  --c-missao: #2E558D;
  --c-visao: #136EB2;
  --c-valores: #497DC8;

  /* ------------------------------------------------------------- neutros */
  --c-ink: #0E1B2A;
  --c-body: #3D4D5C;
  --c-muted: #64748B;
  --c-faint: #94A3B8;
  --c-line: #E3E9EF;
  --c-line-strong: #CBD5E1;
  --c-surface: #F6F9FC;
  --c-surface-2: #EDF3F8;
  --c-white: #FFFFFF;

  /* ------------------------------------------------------------ semântica */
  --c-urgent: #D63A3A;           /* pronto atendimento 24h */
  --c-urgent-100: #FDECEC;
  --c-urgent-200: #F7C7C7;       /* fundo de ícone com mais presença que -100 */
  --c-success: #0E9F6E;
  --c-warning: #C77700;

  /* o anel de foco precisa de 3:1 contra o fundo — o ciano puro só alcança 2,55 */
  --c-focus: #00788F;

  /* ---------------------------------------------------------- tipografia */
  --font-sans: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue",
               Arial, "Noto Sans", sans-serif;
  --font-display: var(--font-sans);

  --fs-display: clamp(2.25rem, 1.55rem + 2.9vw, 3.75rem);
  --fs-h1: clamp(1.95rem, 1.45rem + 2.1vw, 3rem);
  --fs-h2: clamp(1.6rem, 1.32rem + 1.25vw, 2.25rem);
  --fs-h3: clamp(1.25rem, 1.13rem + 0.5vw, 1.5rem);
  --fs-h4: clamp(1.09rem, 1.03rem + 0.28vw, 1.25rem);
  --fs-lead: clamp(1.06rem, 1.01rem + 0.24vw, 1.1875rem);
  --fs-body: 1.0625rem;
  --fs-sm: 0.9375rem;
  --fs-xs: 0.8125rem;
  --fs-eyebrow: 0.8125rem;

  --lh-tight: 1.14;
  --lh-snug: 1.3;
  --lh-body: 1.7;

  --ls-display: -0.022em;
  --ls-heading: -0.014em;
  --ls-eyebrow: 0.14em;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* --------------------------------------------------------- espaçamento */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.25rem;
  --sp-6: 1.5rem;
  --sp-8: 2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-20: 5rem;
  --sp-24: 6rem;

  /* respiro vertical das seções, fluido */
  --section-y: clamp(3.5rem, 2.2rem + 5vw, 6.5rem);
  --section-y-sm: clamp(2.5rem, 1.8rem + 3vw, 4rem);

  /* ------------------------------------------------------------- layout */
  --container: 1200px;
  --container-narrow: 820px;
  --container-wide: 1400px;
  --gutter: clamp(1.15rem, 0.75rem + 1.8vw, 2.5rem);

  --header-h: 84px;
  --header-h-compact: 68px;

  /* --------------------------------------------------------------- forma */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-xl: 24px;
  --r-2xl: 32px;
  --r-pill: 999px;

  --shadow-xs: 0 1px 2px rgba(6, 42, 71, 0.06);
  --shadow-sm: 0 2px 8px rgba(6, 42, 71, 0.07);
  --shadow-md: 0 8px 24px rgba(6, 42, 71, 0.09);
  --shadow-lg: 0 18px 48px rgba(6, 42, 71, 0.13);
  --shadow-header: 0 2px 16px rgba(6, 42, 71, 0.10);

  --ring: 0 0 0 3px rgba(0, 177, 211, 0.45);

  /* ------------------------------------------------------------ movimento */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast: 140ms;
  --dur: 240ms;
  --dur-slow: 420ms;

  --z-header: 100;
  --z-drawer: 200;
  --z-overlay: 190;
  --z-top: 300;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur: 0ms;
    --dur-slow: 0ms;
  }
}