/* ============================================================
   SoftPay Fiscal — Design Tokens
   Arquitetura herdada do chassi FroX; valores da marca SoftPay:
   azul #2A96DE, sky #7DD1FF, navy #0A2350/#061633, Poppins.
   Mantém os MESMOS nomes de token do FroX para o gerador de blog
   e as seções reutilizarem sem tradução.
   ============================================================ */

:root {
  /* ---- Marca (azul SoftPay) --------------------------------- */
  --brand:     #2A96DE;
  --brand-600: #1F76B3;
  --brand-700: #165D8F;
  --brand-400: #57ADE8;
  --brand-300: #7DD1FF;   /* sky */
  --brand-100: #D6ECFA;
  --brand-50:  #EFF7FD;
  --brand-fg:  #FFFFFF;

  /* Azul em canais separados p/ alpha sem duplicar a cor */
  --brand-rgb: 42, 150, 222;

  /* ---- Neutros (levemente frios) ---------------------------- */
  --bg:        #FFFFFF;
  --bg-subtle: #F5F8FC;
  --bg-sunken: #EEF3F9;
  --surface:   #FFFFFF;
  --ink:       #0D1526;   /* títulos */
  --ink-2:     #3A4557;   /* corpo */
  --ink-3:     #6B7688;   /* secundário */
  --ink-4:     #8A97AC;   /* legendas */
  --line:      #E7EAF0;
  --line-2:    #DCE2EC;

  /* Superfície escura (faixas de contraste, hero, footer) */
  --dark:       #0A2350;   /* navy */
  --dark-2:     #123B73;
  --dark-deep:  #061633;
  --dark-line:  rgba(255,255,255,0.10);
  --dark-ink:   #FFFFFF;
  --dark-ink-2: #9FB4D6;
  --brand-on-dark: #7DD1FF;

  /* ---- Suporte semântico ------------------------------------ */
  --ok:   #0A7D3C;   /* verde (WhatsApp/autorizado) */
  --ok-2: #12A150;
  --warn: #C77700;
  --info: #2A96DE;

  /* ---- Tipografia — Poppins em display e corpo -------------- */
  --font-display: "Poppins", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body:    "Poppins", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --tr-impact: -0.02em;
  --tr-label: 0.14em;

  /* Escala fluida — clamp() escala sem media query. Base 16px. */
  --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.375rem, 1.2rem + 0.8vw, 1.875rem);
  --t-3xl:  clamp(1.75rem, 1.45rem + 1.45vw, 2.625rem);
  --t-4xl:  clamp(1.875rem, 1.5rem + 1.8vw, 3rem);
  --t-5xl:  clamp(2.375rem, 1.6rem + 3.4vw, 4.25rem);

  --lh-tight: 1.04;
  --lh-snug: 1.16;
  --lh-normal: 1.5;
  --lh-relaxed: 1.62;

  --tr-display: -0.022em;
  --tr-tight: -0.014em;
  --tr-wide: 0.08em;

  /* ---- Espaçamento (escala 4px) ----------------------------- */
  --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;

  --section-y: clamp(3.25rem, 2rem + 5vw, 6.5rem);

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

  /* ---- Raio — SoftPay é mais arredondado (cards macios) ----- */
  --r-xs: 6px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 22px;
  --r-pill: 999px;

  /* ---- Elevação — sombras suaves (diferente do FroX flat) --- */
  --sh-xs: 0 1px 2px rgba(13,21,38,.05);
  --sh-sm: 0 2px 8px rgba(13,21,38,.06);
  --sh-md: 0 10px 30px -12px rgba(13,21,38,.14);
  --sh-lg: 0 24px 60px -22px rgba(13,21,38,.22);
  --sh-xl: 0 45px 90px -30px rgba(13,21,38,.28);
  --sh-brand: 0 12px 30px -12px rgba(var(--brand-rgb), .45);
  --sh-brand-hover: 0 16px 38px -12px rgba(var(--brand-rgb), .55);

  --focus: 0 0 0 2px var(--bg), 0 0 0 4px rgba(var(--brand-rgb), .65);

  /* ---- Movimento -------------------------------------------- */
  --e-out: cubic-bezier(0.22, 1, 0.36, 1);
  --e-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --e-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --e-snap: cubic-bezier(0.16, 1, 0.3, 1);

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

  /* ---- Header fixo ------------------------------------------ */
  --topbar-h: 0px;
  --header-h: 72px;

  --z-base: 1;
  --z-sticky: 100;
  --z-header: 200;
  --z-overlay: 300;
  --z-modal: 400;
  --z-toast: 500;
}

@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;
  }
}

@media (max-width: 640px) {
  :root {
    --t-sm: 0.9375rem;
    --t-xs: 0.8125rem;
    --section-y: clamp(2.75rem, 2rem + 2vw, 3.25rem);
    --header-h: 64px;
  }
}