/* ==========================================================================
   TOKENS — Henrique Mendes · Fisioterapeuta esportivo
   Única fonte de verdade de cor, tipografia, espaçamento, forma e movimento.
   Fora deste arquivo, cor só por var(--token); transparência de uma cor da
   marca: color-mix(in srgb, var(--accent) 22%, transparent).
   Documentação: docs/DESIGN-SYSTEM.md
   ========================================================================== */

:root {
  /* ---- Paleta base (fornecida) ---- */
  --green-emerald: #00ff66; /* destaque / ação (verde neon) */
  --green-vivid: #00d957; /* apoio / hover */
  --green-deep: #004d2a; /* sombras / glow */
  --green-black: #07140d; /* fundos */
  --graphite: #252b2a; /* neutro */
  --mint: #a5e6b8; /* contraste / ênfase */
  --gold: #cd9945; /* dourado (mais escuro e metálico) — selo, CREFITO, destaques (uso sutil) */

  /* ---- Papéis semânticos ---- */
  --accent: var(
    --green-emerald
  ); /* botões, card ativo, ponto do eyebrow, palavra do título */
  --accent-hover: var(--green-vivid);
  --accent-vivid: #1aff75; /* hover dos botões dos planos (um pouco mais vivo) */
  --accent-soft: var(--mint); /* links, eyebrow, outline, anel de foco */
  --on-accent: var(
    --green-black
  ); /* texto sobre --accent (branco reprova AA) */

  --bg: var(--green-black);
  --bg-alt: color-mix(in srgb, var(--green-black) 85%, var(--graphite));
  --surface: color-mix(in srgb, var(--green-black) 60%, var(--graphite));
  --surface-2: color-mix(in srgb, var(--green-black) 30%, var(--graphite));
  --border: var(--graphite);
  --border-strong: #6a7b72; /* 3:1+ sobre surface (campos) */

  --text: #ffffff;
  --text-body: #cdd8d1;
  --text-muted: #9daea4;
  --text-dim: #5f6f66; /* só decorativo (índices) */
  --text-placeholder: #8a9a91; /* dica dentro dos campos (janelas de agendamento) */

  /* variações derivadas de --gold (troque só o --gold lá em cima) */
  --gold-bright: color-mix(
    in srgb,
    var(--gold) 65%,
    #fff
  ); /* realce do CREFITO / hover do "Blog" */
  --border-gold: color-mix(in srgb, var(--gold) 55%, transparent);

  --error: #ff5a4f;
  --focus: var(--mint);

  /* ---- Gradientes / efeitos ---- */
  /* Hero (referência website.jpeg): foco de luz atrás do retrato, escurecendo para as bordas */
  --grad-hero:
    linear-gradient(
      to right,
      rgba(3, 8, 5, 0.88) 0%,
      rgba(3, 8, 5, 0.52) 22%,
      transparent 46%,
      transparent 62%,
      rgba(3, 8, 5, 0.78) 100%
    ),
    linear-gradient(to top, var(--green-black) 0%, transparent 22%),
    radial-gradient(
      80% 90% at 68% 38%,
      color-mix(in srgb, var(--green-vivid) 62%, var(--green-deep)) 0%,
      color-mix(in srgb, var(--green-vivid) 28%, var(--green-deep)) 28%,
      var(--green-deep) 52%,
      var(--green-black) 86%
    );
  --grad-cta: radial-gradient(
    110% 100% at 15% 100%,
    var(--green-deep) 0%,
    color-mix(in srgb, var(--green-deep) 35%, var(--green-black)) 50%,
    var(--green-black) 85%
  );
  --glass: linear-gradient(
    135deg,
    color-mix(in srgb, var(--green-black) 78%, transparent),
    color-mix(in srgb, var(--green-black) 55%, transparent)
  );
  --glow-accent: 0 0 40px color-mix(in srgb, var(--green-emerald) 40%, transparent);
  --glow-accent-sm: 0 0 22px color-mix(in srgb, var(--green-emerald) 32%, transparent); /* botões-sanfona (mobile) */
  --glow-accent-soft: 0 0 14px color-mix(in srgb, var(--green-emerald) 20%, transparent); /* botões grandes no celular (halo discreto) */
  --glow-section: 0 0 0 1px color-mix(in srgb, var(--green-emerald) 5%, transparent), 0 0 22px color-mix(in srgb, var(--green-emerald) 10%, transparent); /* seções do blog (discreto) */
  --glow-card: 0 0 0 1px color-mix(in srgb, var(--green-emerald) 16%, transparent), 0 0 36px color-mix(in srgb, var(--green-emerald) 24%, transparent); /* cards-pai dos planos */

  /* ---- Tipografia ---- */
  --font-display: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;

  --fs-h1: clamp(2.5rem, 1.4rem + 5.5vw, 5rem);
  --fs-h2: clamp(2rem, 1.3rem + 3.2vw, 3.5rem);
  --fs-h3: clamp(1.25rem, 1.05rem + 1vw, 1.75rem);
  --fs-h4: 1.125rem;
  --fs-lead: clamp(1.125rem, 1.05rem + 0.4vw, 1.375rem);
  --fs-body: 1rem;
  --fs-small: 0.9375rem;
  --fs-label: 0.75rem;
  --fs-button: 0.8125rem;

  /* ---- Espaçamento (base 4px) ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --section-y: clamp(56px, 8vw, 96px);
  --gutter: clamp(24px, 4vw, 48px);

  /* ---- Layout ---- */
  --container: 1200px;
  --header-h: 64px;

  /* ---- Forma ---- */
  --radius: 6px;
  --radius-card: 10px;
  --radius-plan: 12px; /* cards de plano do consultório (1 / 5 / 10 sessões) */
  --radius-glass: 12px;
  --radius-lg: 24px;
  --radius-pill: 999px;

  /* ---- Sombras (usadas com parcimônia) ---- */
  --shadow-glass: 0 12px 32px rgba(0, 0, 0, 0.45);

  /* ---- Camadas ---- */
  --z-header: 50;
  --z-float: 40;

  /* ---- Movimento (ritmo "padrão": landing page) ---- */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --dur-fast: 160ms;
  --dur-base: 240ms;
  --dur-slow: 400ms;

  --reveal-y-text: 14px; /* deslocamento padrão do reveal */

  --reveal-dur-text: 810ms;
  --reveal-dur-title: 960ms;
  --reveal-dur-block: 900ms;
  --reveal-step: 144ms;
}

@media (min-width: 768px) {
  :root {
    --header-h: 72px;
  }
}