/* =============================================================
   Cinesis Fisioterapia Esportiva
   Design tokens. Ponto unico de cor e de tipografia do site.

   Paleta da marca (definida no brief, nao inventada):
     cal (fundo principal)      #EDEFEA
     seixo claro (superficie)   #CDD3CC
     azul cobalto (primaria)    #2E5AAC
     marinho (secoes escuras)   #26305C
     verde campo (acento)       #4F8A3D
     grafite esporte (texto)    #1A1E2B

   Todos os tokens dependentes abaixo foram recalculados a partir
   desses seis valores. O contraste de cada par texto/fundo em uso
   esta anotado ao lado, medido em WCAG 2.x, minimo AA (4.5:1) para
   texto de corpo.
   ============================================================= */

:root {
  /* ---------- Cor: superficies ---------- */
  --cal:          #edefea;  /* fundo principal */
  --seixo-claro:  #cdd3cc;  /* superficie de apoio, placeholder de midia */
  --white:        #ffffff;  /* cards */

  /* ---------- Cor: marca ---------- */
  --cobalto:       #2e5aac;  /* primaria: display, botoes, links */
  --cobalto-800:   #254a8c;  /* hover do botao escuro */
  --marinho:       #26305c;  /* secoes escuras (footer, bloco escuro), topo do ceu */
  --marinho-900:   #1c2445;  /* rebaixo do marinho para hover em fundo escuro */
  --campo:         #4f8a3d;  /* acento secundario, grama sintetica: nunca texto sobre claro */
  --campo-deep:    #3a6b2c;  /* o mesmo acento, rebaixado ate 5.5:1 sobre --cal:
                                 este e o que pode virar texto, rotulo ou icone no claro */
  --campo-pale:    #b7ddaa;  /* acento legivel sobre escuro (8.4:1 sobre --marinho) */
  --campo-wash:    #eaf2e6;  /* lavado, faixas de apoio e avisos */

  /* ---------- Cor: texto ---------- */
  --grafite:       #1a1e2b;  /* texto principal, 14.3:1 sobre --cal */
  --grafite-soft:  #4b5160;  /* texto secundario, 6.9:1 sobre --cal (AA) */

  /* ---------- Ceu do hero (gradiente literal do brief) ---------- */
  --sky-top:      #26305c;
  --sky-bottom:   #cdd3cc;
  --sky-stop:     84.31%;

  /* Veu do hero. O tom de tinta escurecido (rgb do --grafite) cruza o degrade
     inteiro numa faixa vertical mais forte onde o texto vive. A opacidade de
     base fica em 0.58, acima do minimo de 0.55 pedido no brief: medido contra
     as tres alturas de viewport, e o numero que segura o AA da ênfase clara
     sobre o topo escuro do ceu e da microcopy sobre o meio, ja lavado. */
  --sky-veil:     rgba(26, 30, 43, 0.58);

  /* ---------- Cor: semanticos ---------- */
  --bg:            var(--cal);
  --surface:       var(--white);
  --fg:            var(--grafite);
  --fg-muted:      var(--grafite-soft);
  --fg-on-dark:    #f4f6f1;                        /* 11.9:1 sobre --marinho */
  --fg-on-dark-mu: rgba(244, 246, 241, 0.78);      /*  9.2:1 sobre --marinho */
  --border:        rgba(26, 30, 43, 0.12);
  --border-strong: rgba(26, 30, 43, 0.22);
  --accent:        var(--cobalto);
  --dark-section:  var(--marinho);

  --inset-hairline: rgba(26, 30, 43, 0.06) 0 0 0 1px inset;

  /* ---------- Tipografia ----------
     Chivo no display, Figtree no corpo, Chivo Mono nos kickers e rotulos.
     As tres sao variaveis (eixo wght), sem serifa e sem italico: a rede de
     seguranca font-style normal cobre em, i, cite, address, dfn e var.
     A enfase do display se faz por COR e por PESO, nunca por inclinacao. */
  --font-display: 'Chivo', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-body:    'Figtree', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-mono:    'Chivo Mono', ui-monospace, Menlo, monospace;

  --display-weight:      600;
  --display-emph-style:  normal;      /* regra dura: nenhum italico no site */
  --display-emph-color:  var(--cobalto);
  --display-emph-weight: 700;

  /* Escala fluida entre mobile e desktop */
  --t-display: clamp(2.125rem, 1.2rem + 3.9vw, 3.75rem);     /* hero  34 -> 60px */
  --t-h1:      clamp(2rem, 1.4rem + 2.6vw, 3.25rem);         /* 32 -> 52px */
  --t-h2:      clamp(1.75rem, 1.3rem + 1.9vw, 2.625rem);     /* 28 -> 42px */
  --t-h3:      clamp(1.5rem, 1.28rem + 0.95vw, 2rem);        /* 24 -> 32px */
  --t-h4:      clamp(1.3125rem, 1.18rem + 0.55vw, 1.625rem); /* 21 -> 26px */
  --t-h5:      1.375rem;                                     /* 22px */
  --t-lead:    clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);    /* 17 -> 19px */
  --t-body:    1.0625rem;                                    /* 17px */
  --t-sm:      1rem;                                         /* 16px */
  --t-xs:      0.875rem;                                     /* 14px */
  --t-stat:    clamp(1.75rem, 1.35rem + 1.7vw, 2.625rem);

  --lh-display: 1.06;
  --lh-tight:   1.14;
  --lh-snug:    1.28;
  --lh-body:    1.4;
  --lh-relaxed: 1.45;
  --lh-loose:   1.6;
  --lh-prose:   1.68;   /* corpo longo respira, como a reabilitacao */

  --ls-display: -0.015em;
  --ls-tight:   -0.008em;
  --ls-caps:    0.09em;

  --otf: 'cv03' on, 'cv04' on, 'cv09' on, 'cv11' on;

  /* ---------- Espacamento (escala 8) ---------- */
  --sp-xs:    4px;
  --sp-sm:    8px;
  --sp-md:    10px;
  --sp-lg:    12px;
  --sp-xl:    16px;
  --sp-2xl:   20px;
  --sp-3xl:   24px;
  --sp-4xl:   32px;
  --sp-5xl:   48px;
  --sp-6xl:   64px;
  --sp-7xl:   96px;

  --section-y: clamp(72px, 8vw, 140px);
  --gutter:    clamp(20px, 4vw, 64px);
  --maxw:      1280px;
  --maxw-text: 62ch;

  /* ---------- Raios ---------- */
  --r-sm: 8px;
  --r-md: 10px;
  --r-lg: 12px;
  --r-xl: 14px;
  --r-2xl: 24px;
  --r-card: 24px;
  --r-pill: 999px;

  /* ---------- Movimento ----------
     Eases e springs da engenharia do template. Nao renomear: js/main.js
     depende deles para o reveal em spring e para o parallax. */
  --ease-brand:  cubic-bezier(0.44, 0, 0.56, 1);
  --ease-drift:  cubic-bezier(0.34, 0.64, 0.34, 1);
  --ease-snap:   cubic-bezier(0.27, 0, 0.51, 1);
  --dur-fast:    0.2s;
  --dur-base:    0.4s;
  --dur-slow:    1s;
  --dur-cinema:  2s;
}

/* Breakpoints do template (preservados):
   mobile  <= 699.98px
   tablet    700px - 1199.98px
   desktop >= 1200px                                            */