/* ══════════════════════════════════════════════════════════════════════════
   tokens.css — Bright Future Foundation
   Única fonte de verdade para cor, tipo, espaço, raio, sombra e movimento.
   Nada além deste arquivo declara um valor bruto de cor.

   Os verdes foram amostrados pixel a pixel de bff-logo.png (1080×1080).
   Onde diz "derivado", o tom foi calculado para fechar a escala.
   ══════════════════════════════════════════════════════════════════════════ */

:root {

  /* ── Marca ───────────────────────────────────────────────────────────────
     A logo é um orbe que vai do verde profundo na borda até a luz quase
     branca no centro. Os morros escuros puxam para o azul; o resto da
     superfície puxa para o amarelo. Essa tensão é a identidade.            */

  --forest:      #0D3324;  /* derivado  · faixas escuras, rodapé            */
  --green-800:   #166742;  /* amostrado · morro escuro — AÇÃO PRIMÁRIA      */
  --green-700:   #22753F;  /* derivado  · hover da ação primária            */
  --green-600:   #388848;  /* amostrado · meio do gradiente, ícones         */
  --green-500:   #489858;  /* amostrado · COR DOMINANTE da logo             */
  --green-400:   #77B160;  /* amostrado · borda do orbe, ilustração         */
  --lime-500:    #89B844;  /* amostrado · tom mais saturado — luz, progresso*/
  --lime-300:    #A8C878;  /* amostrado · chips, bordas de destaque         */
  --glow-200:    #D1E49B;  /* amostrado · halo da estrela, estado ativo     */
  --glow-50:     #EDF3D4;  /* derivado  · selos, faixa clara                */

  /* Gradientes canônicos — sempre estes, nunca inventar no componente */
  --grad-brand:  linear-gradient(135deg, var(--green-800), var(--green-500));
  --grad-light:  linear-gradient(135deg, var(--green-500), var(--lime-500));
  --grad-bar:    linear-gradient(90deg, var(--green-800), var(--lime-500));
  --grad-orb:    radial-gradient(circle at 50% 46%,
                   #FBFAE1 0%, var(--glow-200) 22%, var(--lime-300) 38%,
                   var(--green-500) 62%, var(--green-600) 82%, var(--green-800) 100%);

  /* ── Neutros com viés verde ──────────────────────────────────────────────
     Cinza puro sobre verde lê como descuido. Todos carregam um pouco de
     verde para pertencerem à mesma família.                                */

  --ink:         #0E2E20;  /* títulos                                       */
  --ink-2:       #3C5147;  /* corpo de texto                                */
  --ink-3:       #54685C;  /* texto secundário                              */
  --muted:       #6B8177;  /* legendas, metadados                           */
  --subtle:      #93A79A;  /* placeholders, ícones inativos                 */
  --line:        #E1EBE2;  /* bordas                                        */
  --line-2:      #EFF4EE;  /* divisórias internas                           */
  --wash:        #F2F7ED;  /* faixa alternada de seção                      */
  --surface:     #FFFFFF;  /* cards                                         */
  --white:       #FFFFFF;

  /* ── Semânticas — separadas da marca ─────────────────────────────────── */
  --danger:      #B3261E;
  --danger-bg:   #FDECEA;
  --warn:        #9A6A0F;
  --warn-bg:     #FDF4E3;
  --ok:          var(--green-800);
  --ok-bg:       var(--glow-50);

  /* ── Tipografia ──────────────────────────────────────────────────────────
     Schibsted Grotesk nos títulos: grotesco editorial, sério sem ser frio,
     com numerais de largura fixa que seguram valores de doação.
     Manrope no corpo e na interface.
     Newsreader itálico só em depoimentos — dar voz humana ao que é humano. */

  --f-display: 'Schibsted Grotesk', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-body:    'Manrope', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-quote:   'Newsreader', Georgia, 'Times New Roman', serif;

  /* Escala fluida — nenhum tamanho fora desta lista */
  --fs-display: clamp(2.375rem, 1.55rem + 3.5vw, 4.125rem);  /* 38 → 66 */
  --fs-h1:      clamp(2rem,     1.52rem + 2.1vw, 3.125rem);  /* 32 → 50 */
  --fs-h2:      clamp(1.625rem, 1.35rem + 1.25vw, 2.375rem); /* 26 → 38 */
  --fs-h3:      clamp(1.25rem,  1.16rem + 0.4vw, 1.5rem);    /* 20 → 24 */
  --fs-h4:      1.0625rem;                                    /* 17      */
  --fs-lg:      1.0625rem;                                    /* 17      */
  --fs-body:    1rem;                                         /* 16      */
  --fs-sm:      0.9375rem;                                    /* 15      */
  --fs-xs:      0.8125rem;                                    /* 13      */
  --fs-eyebrow: 0.75rem;                                      /* 12      */

  --lh-tight:  1.08;
  --lh-head:   1.18;
  --lh-body:   1.68;

  --tr-display: -0.032em;   /* tracking negativo cresce com o tamanho */
  --tr-head:    -0.021em;
  --tr-eyebrow:  0.14em;

  /* ── Espaço — escala de 4px ─────────────────────────────────────────── */
  --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;

  --sec-y:     clamp(2.75rem, 6vw, 7rem);      /* respiro vertical de seção — enxuto no mobile */
  --sec-y-sm:  clamp(2rem, 4.5vw, 4rem);
  --container: 1240px;
  --gutter:    clamp(1.25rem, 4vw, 2.5rem);
  --measure:   68ch;                            /* largura de leitura       */

  /* ── Geometria ───────────────────────────────────────────────────────────
     O site antigo usava pílula de 100px em tudo, inclusive cards, o que
     achatava a hierarquia. Cards agora têm cantos próprios.               */
  --r-xs:   8px;
  --r-sm:  12px;
  --r-md:  16px;
  --r-lg:  22px;
  --r-xl:  28px;
  --r-pill: 999px;

  /* ── Sombra — tinta verde, nunca preto puro ─────────────────────────── */
  --sh-xs:   0 1px 2px rgba(13, 51, 36, .05);
  --sh-sm:   0 2px 10px rgba(13, 51, 36, .06);
  --sh-md:   0 10px 28px -12px rgba(13, 51, 36, .18);
  --sh-lg:   0 24px 60px -24px rgba(13, 51, 36, .26);
  --sh-ring: 0 0 0 4px rgba(72, 152, 88, .16);

  /* ── Movimento ───────────────────────────────────────────────────────────
     Duas curvas apenas. Entradas usam --ease; ambiente contínuo usa
     --ease-soft. Nada acima de 1,2s.                                      */
  --ease:      cubic-bezier(.22, .61, .36, 1);
  --ease-soft: cubic-bezier(.4, 0, .2, 1);
  --d-fast:  180ms;   /* hover                    */
  --d:       380ms;   /* mudança de estado        */
  --d-slow:  600ms;   /* entrada em cena          */
  --d-xslow: 1100ms;  /* barras e contadores      */
  --stagger: 70ms;    /* atraso entre irmãos      */

  /* ── Camadas ────────────────────────────────────────────────────────── */
  --z-sticky: 50;
  --z-nav:    100;
  --z-drawer: 210;
  --z-modal:  300;
}

/* Aumenta o tracking negativo nos tamanhos grandes — óptica, não capricho */
@media (min-width: 900px) {
  :root { --tr-display: -0.036em; }
}