/*
  DESIGN TOKENS — LesionFree
  Fonte única de verdade para cor, tipografia, espaçamento, raio, sombra
  e breakpoints. Qualquer ajuste de marca ou de teste de CRO que mude um
  valor global (ex.: cor do botão primário) deve ser feito aqui — nunca
  direto nos componentes ou seções.

  Breakpoint principal do projeto: 900px (mobile-first).
  Como custom properties não funcionam dentro de @media, o valor 900px
  está hardcoded nos arquivos component/section — busque por "900px" caso
  precise ajustar o breakpoint em todo o projeto.
*/

:root {
  /* ---------- Cor: fundo ---------- */
  --color-bg: #F7F1E4;              /* fundo padrão das páginas */
  --color-bg-soft: #EFE6D5;         /* faixas de destaque (stats, CTA) */
  --color-surface: #FFFFFF;         /* cards */
  --color-surface-alt: #FCFAF4;     /* gradiente sutil em cards (topo) */
  --color-surface-faq: #FFFBF2;     /* fundo dos itens de FAQ */

  /* ---------- Cor: texto ---------- */
  --color-ink: #2B2420;             /* texto padrão */
  --color-ink-strong: #3A1420;      /* títulos */
  --color-ink-soft: #4A4038;        /* texto secundário */
  --color-muted: #6B6058;           /* texto terciário / legendas */
  --color-label: #8A7F72;           /* rótulos uppercase, metadados */

  /* ---------- Cor: marca ---------- */
  --color-primary: #6E1F30;         /* botões, links, destaques */
  --color-primary-hover: #8A2A3F;
  --color-primary-deep: #5C1626;    /* texto de destaque sobre --color-bg-soft */
  --color-accent: #BD7A3A;          /* dourado/bronze: ícones, eyebrows, gráficos */
  --color-accent-soft: #E7DCC8;     /* trilho de barras/anéis de progresso */

  /* ---------- Cor: rodapé ---------- */
  --color-footer-bg: #2B1015;
  --color-footer-text: #C9BBB3;
  --color-footer-muted: #8A7568;

  /* ---------- Cor: bordas e overlays ---------- */
  --color-border: rgba(43, 36, 32, .08);
  --color-border-strong: rgba(43, 36, 32, .15);
  --overlay-image: linear-gradient(180deg, rgba(43, 16, 21, 0) 34%, rgba(43, 16, 21, .82) 100%);
  --overlay-hero: linear-gradient(100deg, rgba(247, 241, 228, .92) 0%, rgba(247, 241, 228, .64) 32%, rgba(247, 241, 228, 0) 58%);
  --overlay-menu: rgba(20, 10, 10, .45);

  /* ---------- Tipografia ---------- */
  --font-serif: 'Newsreader', Georgia, 'Times New Roman', serif;
  --font-sans: 'Work Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --fs-h1: clamp(1.9rem, 1.55rem + 2vw, 4rem);
  --fs-h2: clamp(1.5rem, 1.28rem + 1.2vw, 2.375rem);
  --fs-h3: clamp(1.05rem, .95rem + .4vw, 1.375rem);
  --fs-lead: clamp(1rem, .93rem + .4vw, 1.375rem);
  --fs-body: 1rem;
  --fs-small: .875rem;
  --fs-eyebrow: .8125rem;
  --fs-stat: clamp(2rem, 1.7rem + 1.2vw, 2.75rem);
  --fs-quote-mark: clamp(1.6rem, 1.4rem + 1vw, 2.25rem);

  --lh-tight: 1.15;
  --lh-heading: 1.3;
  --lh-body: 1.6;

  /* ---------- Espaçamento ---------- */
  --space-3xs: 4px;
  --space-2xs: 8px;
  --space-xs: 12px;
  --space-sm: 16px;
  --space-md: 24px;
  --space-lg: 32px;
  --space-xl: 48px;
  --space-2xl: 64px;
  --space-3xl: 96px;

  /* ---------- Raio ---------- */
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 18px;
  --radius-full: 999px;

  /* ---------- Sombra ---------- */
  --shadow-sm: 0 1px 3px rgba(43, 36, 32, .08);
  --shadow-md: 0 8px 24px rgba(43, 36, 32, .1);
  --shadow-lg: 0 20px 44px rgba(43, 36, 32, .08);
  --shadow-xl: 0 10px 30px rgba(43, 36, 32, .12);

  /* ---------- Layout ---------- */
  --container-max: 1280px;
  --container-pad: 20px;

  /* ---------- Transições ---------- */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --duration-fast: .18s;
  --duration-base: .3s;
}