/* ============================================================
   FroX — Design Tokens
   Fonte da verdade: app froxbr.com (oklch(55% .22 25), Poppins, radius 2px)
   Refs de qualidade: saaslandingpage.com (escala tipográfica, respiro)
   ============================================================ */

:root {
  /* ---- Marca ------------------------------------------------ */
  --brand: oklch(55% 0.22 25);            /* vermelho FroX — idêntico ao app */
  --brand-600: oklch(49% 0.21 25);
  --brand-700: oklch(43% 0.19 25);
  --brand-400: oklch(64% 0.20 25);
  --brand-300: oklch(74% 0.15 25);
  --brand-100: oklch(92% 0.05 25);
  --brand-50:  oklch(97% 0.02 25);
  --brand-fg: oklch(100% 0 0);

  /* Vermelho em canais separados: permite alpha sem duplicar a cor  */
  --brand-l: 55%;
  --brand-c: 0.22;
  --brand-h: 25;

  /* ---- Neutros (levemente frios p/ não brigar com o vermelho) - */
  --bg:        oklch(99% 0 0);
  --bg-subtle: oklch(97.2% 0.002 260);
  --bg-sunken: oklch(95% 0.003 260);
  --surface:   oklch(100% 0 0);
  --ink:       oklch(17% 0.008 260);      /* títulos */
  --ink-2:     oklch(32% 0.006 260);      /* corpo */
  --ink-3:     oklch(52% 0.006 260);      /* secundário */
  --ink-4:     oklch(54.5% 0.006 260);    /* legendas — ≥4.5:1 em bg/subtle/surface (AA) */
  --line:      oklch(91% 0.004 260);
  --line-2:    oklch(87% 0.005 260);

  /* Superfície escura (usada em faixas de contraste, não na página toda) */
  --dark:      oklch(17% 0.01 260);
  --dark-2:    oklch(22% 0.012 260);
  --dark-line: oklch(100% 0 0 / 0.10);
  --dark-ink:  oklch(98% 0 0);
  --dark-ink-2:oklch(75% 0.01 260);
  /* O vermelho da marca rende só 3.5:1 sobre fundo escuro. Em superfícies
     escuras usamos um tom mais claro para o texto passar em AA. */
  --brand-on-dark: oklch(68% 0.19 25);

  /* ---- Suporte semântico ------------------------------------ */
  --ok:   oklch(62% 0.16 155);
  --warn: oklch(75% 0.15 75);
  --info: oklch(60% 0.15 245);

  /* ---- Tipografia ------------------------------------------- */
  /* Montserrat em tudo, a pedido: uma família só para display e corpo.
     Geométrica com peso 800 forte nos títulos; no corpo, os pesos
     400/500 seguram a leitura. Substituiu o par Sora + Inter. */
  --font-display: "Montserrat", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Títulos de impacto: caixa alta + tracking negativo forte.
     Aplicado em h1/h2 — h3/h4 seguem em caixa normal para não virar ruído. */
  --tr-impact: -0.022em;

  /* Label UPPERCASE: assinatura do app (12px/700/0.6px) */
  --tr-label: 0.06em;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Escala fluida — clamp() para escalar sem media query.
     Base 16px; display bate 60px no desktop (padrão saaslandingpage). */
  --t-xs:   0.75rem;
  --t-sm:   0.875rem;
  --t-base: 1rem;
  --t-lg:   clamp(1.0625rem, 0.99rem + 0.32vw, 1.1875rem);
  --t-xl:   clamp(1.1875rem, 1.09rem + 0.45vw, 1.4375rem);
  --t-2xl:  clamp(1.4375rem, 1.28rem + 0.75vw, 1.875rem);
  --t-3xl:  clamp(1.75rem, 1.45rem + 1.45vw, 2.625rem);
  /* h2 de seção: teto em 40px — proporção calma em relação ao h1 */
  --t-4xl:  clamp(1.875rem, 1.55rem + 1.5vw, 2.5rem);
  /* h1 do hero: teto em 54px. O teto anterior (72px, caixa alta) rendia um
     título de 310px que sozinho empurrava o CTA para baixo da dobra. */
  --t-5xl:  clamp(2.125rem, 1.5rem + 2.9vw, 3.375rem);

  --lh-tight: 1.06;
  --lh-snug: 1.18;
  --lh-normal: 1.5;
  --lh-relaxed: 1.65;

  /* Títulos grandes pedem tracking negativo; textos pequenos, positivo */
  --tr-display: -0.032em;
  --tr-tight: -0.018em;
  --tr-wide: 0.08em;

  /* ---- Espaçamento (escala 4px, ritmo consistente) ----------- */
  --s-1: 0.25rem;  --s-2: 0.5rem;   --s-3: 0.75rem;  --s-4: 1rem;
  --s-5: 1.25rem;  --s-6: 1.5rem;   --s-8: 2rem;     --s-10: 2.5rem;
  --s-12: 3rem;    --s-16: 4rem;    --s-20: 5rem;    --s-24: 6rem;
  --s-32: 8rem;

  /* Respiro vertical das seções — fluido */
  /* Mínimo menor no celular: com a página inteira em coluna única, o
     respiro de 4,5rem entre seções vira rolagem morta. */
  /* Teto em 6,5rem (104px), o mesmo respiro da melhor referência do setor.
     Os 9rem anteriores somavam ~700px de rolagem morta ao longo da página
     sem melhorar a leitura. */
  --section-y: clamp(3rem, 1.8rem + 5vw, 6.5rem);

  /* ---- Layout ------------------------------------------------ */
  --container: 1200px;
  --container-narrow: 760px;
  --gutter: clamp(1.25rem, 0.9rem + 1.7vw, 2.5rem);

  /* ---- Raio — o app usa 2px. Mantemos a assinatura industrial,
     com 1 nível acima para cards grandes (não vira "app de bolha"). */
  --r-xs: 2px;
  --r-sm: 3px;
  --r-md: 4px;
  --r-lg: 6px;
  --r-pill: 999px;

  /* ---- Elevação — design flat: sem sombras em botões e blocos.
     Os tokens continuam existindo para não quebrar quem os usa,
     mas todos resolvem para "none". A hierarquia fica por conta
     de borda e cor de fundo. -------------------------------------- */
  --sh-xs: none;
  --sh-sm: none;
  --sh-md: none;
  --sh-lg: none;
  --sh-xl: none;
  --sh-brand: none;
  --sh-brand-hover: none;

  /* Anel de foco — acessibilidade não-negociável */
  --focus: 0 0 0 2px var(--bg), 0 0 0 4px oklch(var(--brand-l) var(--brand-c) var(--brand-h) / 0.65);

  /* ---- Movimento --------------------------------------------
     Curvas próprias: nada de ease-in-out padrão do browser.      */
  --e-out: cubic-bezier(0.22, 1, 0.36, 1);        /* saída suave, "expo" */
  --e-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --e-spring: cubic-bezier(0.34, 1.56, 0.64, 1);  /* overshoot sutil */
  --e-snap: cubic-bezier(0.16, 1, 0.3, 1);

  --d-fast: 160ms;
  --d-base: 280ms;
  --d-slow: 520ms;
  --d-slower: 820ms;

  /* ---- Z-index — mapa único evita guerra de camadas ---------- */
  --z-base: 1;
  --z-sticky: 100;
  --z-header: 200;
  --z-overlay: 300;
  --z-modal: 400;
  --z-toast: 500;
}

/* Respeita quem pediu menos movimento no SO. Regra global e definitiva. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --d-fast: 1ms; --d-base: 1ms; --d-slow: 1ms; --d-slower: 1ms;
  }
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}

/* Fallback de cor: browsers sem oklch() (Safari < 15.4) recebem sRGB.
   @supports evita que a página apareça sem cor em navegadores antigos. */
@supports not (color: oklch(50% 0.1 25)) {
  :root {
    --brand: #e0342c;      --brand-600: #c22a24;  --brand-700: #a2211d;
    --brand-400: #ec5f52;  --brand-300: #f59288;  --brand-100: #fbdedb;
    --brand-50: #fef3f2;   --brand-fg: #ffffff;
    --bg: #fcfcfd;         --bg-subtle: #f7f8fa;  --bg-sunken: #f1f2f5;
    --surface: #ffffff;
    --ink: #16181d;        --ink-2: #43474f;      --ink-3: #71767f;
    --ink-4: #9aa0a8;      --line: #e5e7eb;       --line-2: #d8dbe0;
    --dark: #1a1c21;       --dark-2: #24272d;     --dark-ink: #fafafa;
    --dark-ink-2: #b6bac1; --dark-line: rgba(255,255,255,0.10);
    --ok: #16a34a;         --warn: #eab308;       --info: #2563eb;
  }
}

/* ---------- Leitura no celular ----------------------------------
   14px (--t-sm) é confortável no desktop, mas cansa em tela pequena
   segurada na mão: iOS e Android usam 15-16px como corpo de texto.
   Só o texto de apoio sobe — rótulos e legendas seguem menores para
   preservar a hierarquia. */
@media (max-width: 640px) {
  :root {
    --t-sm: 0.9375rem;   /* 15px */
    --t-xs: 0.8125rem;   /* 13px */
    /* Respiro de seção mais curto no celular: em coluna única, os 48px
       de cada lado viravam rolagem morta — 9 seções × ~16px ≈ 1/6 de
       tela devolvida sem apertar a leitura. */
    --section-y: clamp(2.5rem, 2rem + 2vw, 3rem);
  }
}