/* ==========================================================================
   Tokens — Lúcio Valentim, Associação de Solidariedade Social
   Paleta do logótipo, nas cores escolhidas pelo Pedro a 17/08/2026:
   azul #1DA6DA · verde #9EC438 · laranja #ED7D20
   Nunca escrever cores em hexadecimal fora deste ficheiro.

   Nenhuma das três serve para texto tal e qual — sobre branco dão 2.79:1,
   2.02:1 e 2.78:1, e o mínimo da WCAG AA é 4.5:1. A regra da casa:
     · a cor entra **escurecida** onde é letra;
     · entra **tal e qual** onde é fundo ou grafismo, com texto escuro por cima.

   Os valores foram calculados e verificados por `testes/paletas.py`, que mede
   cada par e recusa gerar se algum falhar.
   ========================================================================== */

:root {
  /* --- Cor: base ------------------------------------------------------ */
  --c-bg: #ffffff;
  --c-bg-alt: #f4fafd;          /* branco puxado ao azul, não cinzento neutro */
  --c-bg-warm: #fafdfe;
  --c-bg-deep: #105b78;         /* secções escuras e formulário — branco 7.53:1 */
  --c-bg-deep-2: #0c4256;       /* topbar e rodapé — branco 10.88:1 */
  --c-ciano: #1da5d9;           /* blocos destacados — cor pedida pelo cliente */
  /* Os mesmos dois, em componentes soltas. São precisos nos degradés com alfa
     do hero: `rgb(… / 0.88)` não aceita uma variável em hexadecimal.
     ⚠️ Manter a par dos dois de cima — foi por estarem escritos à mão no
     styles.css que o hero ficou roxo depois de a paleta passar a azul. */
  --c-deep-rgb: 16 91 120;
  --c-deep-2-rgb: 12 66 86;
  --c-surface: #ffffff;
  --c-border: #dceef6;
  --c-border-strong: #a9d6e8;

  /* --- Cor: texto ----------------------------------------------------- */
  --c-heading: #0b4155;         /* 11.04:1 sobre branco */
  --c-text: #0b4155;
  --c-text-soft: #10708f;       /* 5.69:1 sobre branco */
  /* Estado «por revelar» dos títulos. Só em <h2>, que nunca desce dos 30px —
     texto grande para a WCAG, cujo mínimo é 3:1. Não usar noutro sítio.
     3.35:1 sobre branco · 3.24:1 sobre o alternado. */
  --c-heading-fade: #1a9acb;
  --c-text-invert: #ffffff;
  --c-text-invert-soft: #d3ecf6; /* 6.2:1 sobre o fundo escuro */

  /* --- Cor: acento ---------------------------------------------------- */
  /* Azul do logótipo escurecido. Passa AA nos três fundos claros:
     branco 5.27:1 · alternado 5.06:1 · tint 4.90:1 */
  --c-accent: #147499;
  --c-accent-hover: #0f5674;

  /* Verde e laranja tal e qual, porque são fundo e não letra. O texto por
     cima é o azul escurecido até passar — inclusive no estado hover, que é
     mais escuro e por isso o caso difícil. */
  --c-salmon: #9ec438;          /* botão primário — texto 5.78:1 */
  --c-salmon-deep: #8eb032;     /* hover — texto 4.67:1 */
  --c-salmon-tint: #eef7fb;     /* pastilhas de ícone, em azul */
  --c-laranja: #ed7d20;         /* botão secundário — texto 5.67:1 */
  --c-laranja-deep: #d5701d;    /* hover — texto 4.63:1 */
  /* O laranja puro sobre a sua própria pastilha dá 2.52:1 — abaixo dos 3:1
     que a WCAG pede a grafismo. Este é o mesmo laranja escurecido 25%. */
  --c-laranja-icone: #b25e18;   /* 4.23:1 sobre a pastilha · 4.66:1 sobre branco */
  --c-laranja-tint: #fdf2e9;
  --c-plum: #072632;            /* texto sobre verde e laranja */
  --c-plum-soft: #17627e;

  /* O verde puro sobre o fundo escuro dá 3.73:1 — chega para grafismo, não
     para letra. Este é o mesmo verde clareado 35%, para os sítios onde é
     texto sobre escuro: erros do formulário, ligações do rodapé, destaque do
     título do hero. Escuro 4.83:1 · topbar 6.98:1. */
  --c-sobre-escuro: #c0d97e;

  /* --- Cor: estado ---------------------------------------------------- */
  --c-error: #a3251b;
  --c-success: #1f6b3a;
  --c-error-invert: #ffbdb4;    /* erros e asterisco sobre o formulário escuro — 4.73:1 */
  --c-success-invert: #b6e08a;

  /* --- Tipografia ----------------------------------------------------- */
  --font-display: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;

  --fs-xs: 0.8125rem;
  --fs-sm: 0.9375rem;
  --fs-base: 1.0625rem;
  --fs-md: 1.1875rem;
  --fs-lg: clamp(1.25rem, 0.9rem + 1vw, 1.5rem);
  --fs-xl: clamp(1.5rem, 1rem + 1.6vw, 1.9375rem);
  --fs-2xl: clamp(1.875rem, 1.2rem + 2.4vw, 2.75rem);
  --fs-3xl: clamp(2.375rem, 1.3rem + 4.2vw, 4.25rem);
  --fs-counter: clamp(2.5rem, 1.6rem + 3vw, 3.75rem);

  --lh-tight: 1.08;
  --lh-heading: 1.18;
  --lh-body: 1.65;
  --lh-loose: 1.75;

  --tracking-tight: -0.025em;
  --tracking-wide: 0.1em;

  /* --- Espaçamento ---------------------------------------------------- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 2.5rem;
  --sp-8: 3rem;
  --sp-9: 4rem;
  --sp-10: 5rem;
  --sp-11: 6rem;

  --section-y: clamp(3.5rem, 2rem + 6vw, 7rem);

  /* --- Layout --------------------------------------------------------- */
  --wrap: 1200px;
  --wrap-narrow: 760px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --header-h: 5.25rem;

  /* --- Raio ----------------------------------------------------------- */
  --r-sm: 6px;
  --r-md: 14px;
  --r-lg: 24px;
  --r-xl: 36px;
  --r-full: 999px;

  /* --- Sombra --------------------------------------------------------- */
  --sh-sm: 0 1px 2px rgb(11 65 85 / 0.06), 0 2px 6px rgb(11 65 85 / 0.05);
  --sh-md: 0 4px 10px rgb(11 65 85 / 0.07), 0 12px 30px rgb(11 65 85 / 0.08);
  --sh-lg: 0 10px 24px rgb(11 65 85 / 0.10), 0 28px 64px rgb(11 65 85 / 0.13);

  /* --- Movimento ------------------------------------------------------ */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast: 140ms;
  --dur: 260ms;
  --dur-slow: 460ms;
}

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