/* ==========================================================================
   Nexus Fit — Design Tokens
   Fonte da verdade: ui-guide/guia-ui-webdesign-nexus-fit.md (secao 15)
   Paleta herdada dos tokens ja em producao no site principal (nexus-fisioterapia),
   reconciliados com o Manual de Marca oficial (Cadet Blue / Moonstone / White Smoke).
   Territorio proprio da Fit: navy como campo de fundo cheio (hero, vilao, CTA final).

   Revisao v2 (2026-08):
   - 3 tons de fundo (claro / neutro / escuro) para o ritmo de capitulos — ver main.css
   - corpo 16px -> 17px e leading 1.6 -> 1.65 (publico 45-75)
   - --color-text-secondary escurecido de #52617A para #3F4C63 (AAA no corpo)
   - novo --color-accent-on-dark: teal-como-TEXTO sobre navy (AA folgado)
   - tokens de movimento (--ease-motion / --dur-*), ver bloco de animacao em main.css
   NAO usa acento terracota: o manual define 3 cores e so 3 (decisao do cliente, ago/2026).
   ========================================================================== */

:root {
  /* ---- Color roles ------------------------------------------------------ */
  --color-base: #17253B;              /* navy (Cadet Blue) - estrutura, header/footer, secoes cheias */
  --color-base-hover: #1D2E49;
  --color-structure: #17253B;
  --color-background: #F5F5F5;        /* TOM 1 "claro" - White Smoke */
  --color-background-neutral: #E9EDF2; /* TOM 2 "neutro" - cinza-azulado (metodo, objecoes) */
  --color-surface: #FFFFFF;           /* cards sobre fundo claro/neutro */
  --color-surface-dark: rgba(255, 255, 255, .10); /* cards de vidro sobre navy */
  --color-surface-dark-hover: rgba(255, 255, 255, .15);

  --color-accent: #83A5AA;            /* teal (Moonstone) - CTA, icones, bordas de destaque */
  --color-accent-hover: #8FB6BC;
  --color-accent-ink: #39646A;        /* teal-como-TEXTO sobre fundo claro (AA) */
  --color-accent-on-dark: #A8C8CD;    /* teal-como-TEXTO sobre navy (6.3:1 — corrige o h3 dos cards de ponte) */

  --color-text-primary: #17253B;      /* texto sobre fundo claro */
  --color-text-on-dark: #FAFAFA;      /* texto sobre fundo escuro (navy) */
  --color-text-secondary: #3F4C63;    /* AAA sobre os 3 fundos claros (>=7.3:1) */
  --color-text-on-dark-secondary: rgba(250, 250, 250, .82);

  --color-border: #D1D7E0;
  --color-border-dark: rgba(255, 255, 255, .20);
  --color-divider: rgba(209, 215, 224, .6);
  --color-disabled: #C4CBD4;

  --color-whatsapp: #22C55E;
  --color-whatsapp-hover: #16A34A;
  --color-warning: #F59E0B;
  --color-error: #EF4444;
  --color-info: #3B82F6;

  /* ---- Gradients ---------------------------------------------------------*/
  --gradient-primary: linear-gradient(135deg, #17253B, #1D2E49);
  --gradient-accent: linear-gradient(135deg, #83A5AA, #8FB6BC);
  --gradient-hero: linear-gradient(135deg, #17253B 0%, #83A5AA 100%);
  --gradient-hero-overlay: linear-gradient(135deg, rgba(23,37,59,.85) 0%, rgba(131,165,170,.70) 100%);
  /* scrim direcional adicional atras do texto do hero — ver .hero__scrim */
  --gradient-hero-scrim: linear-gradient(100deg, rgba(9,15,25,.90) 0%, rgba(9,15,25,.72) 42%, rgba(9,15,25,.30) 72%, rgba(9,15,25,.12) 100%);

  /* ---- Typography ---------------------------------------------------------*/
  /* Poppins (titulo + corpo). Decisao documentada no guia §3.1: o Manual de Marca
     traz apenas um especimen visual sem nome de fonte (sans geometrica, NAO serifada).
     Poppins e a aproximacao recomendada. Confirmado pelo cliente em ago/2026. */
  --font-display: 'Poppins', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-body: 'Poppins', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;

  --text-h1: clamp(2.25rem, 1.55rem + 3vw, 3.5rem);      /* 36 - 56px */
  --text-h2: clamp(1.75rem, 1.35rem + 1.8vw, 2.5rem);    /* 28 - 40px */
  --text-h3: clamp(1.25rem, 1.05rem + 0.9vw, 1.75rem);   /* 20 - 28px */
  --text-pull-quote: clamp(1.375rem, 0.85rem + 2.2vw, 2.25rem); /* 22 - 36px */
  --text-lead: clamp(1.0625rem, 0.95rem + 0.4vw, 1.3125rem);    /* 17 - 21px */
  --text-body: 1.0625rem;   /* 17px — minimo do publico 45-75 */
  --text-small: .9375rem;   /* 15px */
  --text-label: .875rem;    /* 14px — caixa-alta com tracking (eyebrow) */
  --text-micro: .875rem;    /* 14px */

  --leading-tight: 1.15;
  --leading-snug: 1.2;
  --leading-body: 1.65;
  --tracking-label: .1em;

  /* ---- Spacing (escala base 8px) ------------------------------------------*/
  --container-max: 1400px;
  --container-pad: 16px;
  --section-y: 80px;
  --section-y-mobile: 56px;
  --header-h: 88px;           /* estado expandido (topo da pagina) */
  --header-h-scrolled: 64px;  /* estado reduzido (apos rolar) */
  --header-h-mobile: 64px;
  --utility-bar-h: 34px;
  --grid-gap: 32px;
  --card-pad: 32px;
  --card-pad-mobile: 20px;
  --narrative-max-w: 700px;

  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 40px;
  --space-6: 48px;
  --space-8: 64px;
  --space-10: 80px;
  --space-12: 96px;

  /* ---- Shape ---------------------------------------------------------------*/
  --radius-sm: 8px;
  --radius-icon: 12px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-full: 9999px;

  /* ---- Shadow (tingidas de navy) ---------------------------------------------*/
  --shadow-soft: 0 4px 20px -4px rgba(23, 37, 59, .10);
  --shadow-card: 0 8px 30px -8px rgba(23, 37, 59, .15);
  --shadow-card-hover: 0 20px 40px -12px rgba(23, 37, 59, .25);

  /* ---- Movimento -------------------------------------------------------------*/
  --ease-motion: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-reveal: 450ms;
  --dur-stagger: 80ms;
  --dur-micro: 200ms;
  --dur-tap: 150ms;
  --dur-accordion: 250ms;
  --dur-header: 250ms;

  --transition-fast: all .2s cubic-bezier(.4, 0, .2, 1);
  --transition-base: all .3s cubic-bezier(.4, 0, .2, 1);
  --transition-bounce: all .4s cubic-bezier(.175, .885, .32, 1.275);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --transition-fast: color .01s;
    --transition-base: color .01s;
    --transition-bounce: color .01s;
    --dur-reveal: 0ms;
    --dur-stagger: 0ms;
    --dur-micro: 0ms;
    --dur-tap: 0ms;
    --dur-accordion: 0ms;
    --dur-header: 0ms;
  }
}