/* ============================================================
   FadeSync — tokens de design (fonte da verdade)
   Direção: verde esmeralda sobre neutros esverdeados.
   Uso: importe este arquivo (ou mantenha a cópia site/css/tokens.css
   sincronizada) antes de qualquer folha de estilo do produto.

   Temas: o bloco :root define o tema claro. O tema escuro é aplicado
   (a) automaticamente via prefers-color-scheme quando o usuário não
   escolheu tema, e (b) via [data-theme="dark"] quando escolheu.
   ============================================================ */

:root {
  /* ---- tipografia ---- */
  --fs-fonte-display: 'Sora', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --fs-fonte-texto: 'Public Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;

  --fs-tam-xs: 0.75rem;    /* 12px — legendas, selos          */
  --fs-tam-sm: 0.875rem;   /* 14px — apoio, rodapé            */
  --fs-tam-base: 1rem;     /* 16px — texto corrido            */
  --fs-tam-md: 1.125rem;   /* 18px — destaque de texto        */
  --fs-tam-lg: 1.375rem;   /* 22px — título de cartão         */
  --fs-tam-xl: 1.75rem;    /* 28px — título de seção (mobile) */
  --fs-tam-2xl: 2.25rem;   /* 36px — título de seção          */
  --fs-tam-3xl: clamp(2.25rem, 1.4rem + 3.6vw, 3.375rem); /* hero */

  /* ---- espaçamento (base 4px) ---- */
  --fs-esp-1: 0.25rem;
  --fs-esp-2: 0.5rem;
  --fs-esp-3: 0.75rem;
  --fs-esp-4: 1rem;
  --fs-esp-5: 1.5rem;
  --fs-esp-6: 2rem;
  --fs-esp-7: 3rem;
  --fs-esp-8: 4rem;
  --fs-esp-9: 6rem;

  /* ---- raios e sombra ---- */
  --fs-raio-s: 8px;
  --fs-raio: 12px;
  --fs-raio-g: 18px;
  --fs-raio-pill: 999px;
  --fs-sombra: 0 1px 2px rgba(21, 32, 25, 0.06), 0 8px 24px rgba(21, 32, 25, 0.07);

  /* ---- cores · tema claro ---- */
  --fs-primaria: #0C7A49;        /* ações, links, marca            */
  --fs-primaria-forte: #095E38;  /* hover/estado ativo             */
  --fs-primaria-suave: #E3F2E9;  /* fundos de selo e destaque      */
  --fs-sobre-primaria: #FFFFFF;  /* texto sobre a primária         */
  --fs-fundo: #F5FAF6;           /* fundo da página                */
  --fs-superficie: #FFFFFF;      /* cartões e painéis              */
  --fs-tinta: #152019;           /* texto principal                */
  --fs-texto-suave: #5E7065;     /* texto secundário               */
  --fs-linha: #DDE8DF;           /* bordas e divisores             */
  --fs-sucesso: #1E8A50;
  --fs-alerta: #B98514;
  --fs-erro: #B4402E;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    /* ---- cores · tema escuro (automático) ---- */
    --fs-primaria: #45C588;
    --fs-primaria-forte: #6AD3A0;
    --fs-primaria-suave: #143024;
    --fs-sobre-primaria: #05271A;
    --fs-fundo: #0C1310;
    --fs-superficie: #16211B;
    --fs-tinta: #E7F1EA;
    --fs-texto-suave: #91A799;
    --fs-linha: #243228;
    --fs-sucesso: #57C98D;
    --fs-alerta: #E0B04A;
    --fs-erro: #E56A55;
    --fs-sombra: 0 1px 2px rgba(0, 0, 0, 0.35), 0 8px 24px rgba(0, 0, 0, 0.35);
  }
}

:root[data-theme="dark"] {
  /* ---- cores · tema escuro (escolha do usuário) ---- */
  --fs-primaria: #45C588;
  --fs-primaria-forte: #6AD3A0;
  --fs-primaria-suave: #143024;
  --fs-sobre-primaria: #05271A;
  --fs-fundo: #0C1310;
  --fs-superficie: #16211B;
  --fs-tinta: #E7F1EA;
  --fs-texto-suave: #91A799;
  --fs-linha: #243228;
  --fs-sucesso: #57C98D;
  --fs-alerta: #E0B04A;
  --fs-erro: #E56A55;
  --fs-sombra: 0 1px 2px rgba(0, 0, 0, 0.35), 0 8px 24px rgba(0, 0, 0, 0.35);
}