/* =============================================================================
   TREINO COM ELÁSTICOS · TOKENS DA MARCA (v1, 04/11/2026)
   Fonte única de cor, tipografia, forma e movimento. Os dois apps (Treino e
   Planejamento Anual), a LP, o checkout e qualquer peça nova usam estes valores.
   Não escreva hex solto no código: use as variáveis.
   ========================================================================== */
:root {
  /* ---- cor: base (fundos escuros) ---- */
  --tce-navy-950: #020A1C;   /* fundo do logo e do ícone */
  --tce-navy-900: #0B101B;   /* fundo padrão das telas */
  --tce-navy-800: #0F1626;   /* faixas, barras */
  --tce-card:     #151C2C;   /* cartão */
  --tce-card-2:   #1A2235;   /* cartão elevado, campo de texto */
  --tce-line:     #232C40;   /* linhas e bordas */

  /* ---- cor: texto ---- */
  --tce-text:     #F1F5F9;   /* texto principal (17,4:1 no fundo) */
  --tce-text-2:   #94A3B8;   /* texto secundário (7,4:1) */
  --tce-text-3:   #64748B;   /* só texto grande ou legenda de apoio (4,0:1) */

  /* ---- cor: marca ---- */
  --tce-orange:       #FF7A00;   /* ação principal, preço, destaque */
  --tce-orange-press: #E56D00;
  --tce-orange-soft:  rgba(255, 122, 0, .14);
  --tce-lime:         #B4E85D;   /* elástico, progresso, "feito", selo positivo */
  --tce-lime-press:   #9FD348;
  --tce-lime-soft:    rgba(180, 232, 93, .14);
  --tce-gold:         #FFD66B;   /* bônus e VIP */
  --tce-red:          #E10600;   /* urgência, bloco de headline nos anúncios */

  /* ---- texto SOBRE cor de marca (regra de contraste) ----
     Branco sobre laranja dá 2,6:1 e sobre lima 1,4:1 (reprovado).
     Sobre laranja, lima e ouro o texto é SEMPRE azul-marinho. */
  --tce-on-orange: #0B101B;
  --tce-on-lime:   #0B101B;
  --tce-on-gold:   #0B101B;
  --tce-on-red:    #FFFFFF;      /* 5,0:1 */

  /* ---- tipografia ---- */
  --tce-font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --tce-font-video: 'Montserrat', 'Inter', sans-serif;   /* legenda de vídeo (peso 900) */
  --tce-fs-display: clamp(30px, 8vw, 40px);   /* título de tela */
  --tce-fs-title:   22px;
  --tce-fs-body:    16px;                     /* mínimo no celular */
  --tce-fs-small:   13px;
  --tce-fs-micro:   11px;                     /* rótulos em caixa alta */
  --tce-lh-tight:   1.15;
  --tce-lh-body:    1.5;

  /* ---- forma e espaço (grade de 4 pt) ---- */
  --tce-r-sm: 10px;
  --tce-r-md: 14px;
  --tce-r-lg: 20px;
  --tce-r-xl: 28px;
  --tce-r-pill: 999px;
  --tce-s-1: 4px;  --tce-s-2: 8px;  --tce-s-3: 12px; --tce-s-4: 16px;
  --tce-s-5: 24px; --tce-s-6: 32px; --tce-s-7: 48px;
  --tce-tap: 48px;                            /* alvo de toque mínimo */
  --tce-shadow: 0 10px 30px rgba(0, 0, 0, .45);
  --tce-glow-orange: 0 8px 28px rgba(255, 122, 0, .35);

  /* ---- movimento (Apple: responde na hora, nunca trava a mão) ---- */
  --tce-press-ms: 100ms;                      /* resposta ao toque */
  --tce-fast-ms:  180ms;
  --tce-base-ms:  320ms;
  --tce-ease:     cubic-bezier(.2, .8, .2, 1);          /* entrada */
  --tce-ease-spring: cubic-bezier(.34, 1.4, .64, 1);    /* só quando houve gesto de arrastar */
}

@media (prefers-reduced-motion: reduce) {
  :root { --tce-press-ms: 0ms; --tce-fast-ms: 0ms; --tce-base-ms: 0ms; }
}