/* FoxAgentic Design System · tokens para a landing (Modelo 1 Clássico)
   Fonte: artifact "FoxAgentic Design System" (https://claude.ai/artifact/GaCzcjksobd5bLiwFJvPmv)
   Regra: componentes usam SOMENTE estas variáveis. Nada de hex solto. */

:root {
  /* ---------- Paleta base (fixa, não muda com o tema) ---------- */
  --fa-meia-noite: #15142B;
  --fa-meia-noite-alta: #1F1E3A;   /* cartões sobre fundo meia-noite */
  --fa-meia-noite-linha: #34325A;  /* bordas sobre fundo meia-noite */
  --fa-violeta: #7C6CF2;           /* só fundo de botão/realce, nunca texto sobre branco */
  --fa-violeta-claro: #A99FF7;     /* texto de destaque sobre meia-noite */
  --fa-ambar: #F5A524;             /* no máximo 1 destaque por dobra; nunca texto sobre branco */
  --fa-lavanda: #F4F3FA;
  --fa-branco: #FFFFFF;
  --fa-texto-sobre-escuro: #F4F3FA;
  --fa-texto-sec-sobre-escuro: #B9B7D3;
  --fa-positivo-sobre-escuro: #5CC38F;

  /* Cores de produto (somente nos ícones dos cards de produto) */
  --fa-postagent: #0A3D62;
  --fa-vitrine: #D62976;

  /* ---------- Tokens semânticos · tema CLARO (padrão) ---------- */
  --superficie: #F4F3FA;
  --superficie-alta: #FFFFFF;
  --texto: #15142B;
  --texto-secundario: #4B4A66;
  --violeta-texto: #5B4BD6;
  --linha: #D6D3EA;
  --positivo: #1F7A4D;
  --alerta: #B42318;
  --foco: #5B4BD6;
  --sombra-flutuante: 0 8px 24px rgba(21, 20, 43, 0.08);

  /* ---------- Tipografia ---------- */
  --fonte: "Manrope", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --peso-regular: 400;
  --peso-medio: 500;
  --peso-semi: 600;
  --peso-bold: 700;
  --peso-extra: 800;

  /* Escala da landing (desktop → mobile via clamp) */
  --fs-h1: clamp(2.25rem, 1.4rem + 3.4vw, 3.5rem);     /* 36 → 56 */
  --fs-h2-xl: clamp(2rem, 1.5rem + 2vw, 2.75rem);      /* 32 → 44 (SaaS sob medida) */
  --fs-h2: clamp(1.75rem, 1.35rem + 1.6vw, 2.5rem);    /* 28 → 40 */
  --fs-h2-cta: clamp(1.75rem, 1.4rem + 1.4vw, 2.375rem); /* 28 → 38 (contato) */
  --fs-h2-faq: clamp(1.625rem, 1.35rem + 1vw, 2.25rem);  /* 26 → 36 */
  --fs-h3-card: 1.375rem;   /* 22 */
  --fs-h3: 1.1875rem;       /* 19 */
  --fs-lead: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem); /* 17 → 19 */
  --fs-corpo-g: 1.0625rem;  /* 17 */
  --fs-corpo: 1rem;         /* 16 */
  --fs-pequeno: 0.875rem;   /* 14 */
  --fs-kicker: 0.875rem;    /* 14, uppercase, tracking 1.5px */
  --lh-titulo: 1.12;
  --lh-corpo: 1.6;

  /* ---------- Espaço, raio, layout ---------- */
  --esp-1: 4px;
  --esp-2: 8px;
  --esp-3: 16px;
  --esp-4: 32px;
  --esp-5: 64px;
  --raio-p: 4px;
  --raio-m: 12px;
  --raio-g: 24px;
  --container: 1200px;
  --gutter: 24px;
  --secao-y: clamp(56px, 4rem + 2vw, 88px);
}

/* ---------- Tema ESCURO ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --superficie: #15142B;
    --superficie-alta: #1F1E3A;
    --texto: #F4F3FA;
    --texto-secundario: #B9B7D3;
    --violeta-texto: #A99FF7;
    --linha: #34325A;
    --positivo: #5CC38F;
    --alerta: #F97066;
    --foco: #A99FF7;
    --sombra-flutuante: 0 8px 24px rgba(0, 0, 0, 0.35);
  }
}
:root[data-theme="dark"] {
  --superficie: #15142B;
  --superficie-alta: #1F1E3A;
  --texto: #F4F3FA;
  --texto-secundario: #B9B7D3;
  --violeta-texto: #A99FF7;
  --linha: #34325A;
  --positivo: #5CC38F;
  --alerta: #F97066;
  --foco: #A99FF7;
  --sombra-flutuante: 0 8px 24px rgba(0, 0, 0, 0.35);
}