/* ============================================================
   SHZ /v1 — Design Tokens
   Direção: SaaS acessível e confiável (ref. Botmaker) — branco quente,
   cards arredondados com sombra suave, cor de marca como protagonista.
   Público: donos de comércio, escolas, cartórios, advogados, sindicatos —
   precisa ler como profissional e caloroso, não artístico nem austero.
   ============================================================ */

:root {
  /* Fundos */
  --bg-page: #ffffff;
  --bg-section-alt: #fff7f0;
  --bg-card: #ffffff;
  --bg-panel: #fff3e8;

  /* Marca / ação */
  --brand-orange: #ff6b18;
  --brand-orange-action: #c2410c;
  --brand-orange-hover: #9a3412;
  --brand-orange-text: #b33d00;
  --brand-orange-soft: #ff8a4c;
  --brand-purple: #473ac2;
  --brand-pink: #d4208b;
  --brand-navy: #1b1649;
  --brand-navy-soft: #2a2273;
  --brand-gradient: linear-gradient(100deg, var(--brand-orange), var(--brand-pink));

  /* Acentos por produto */
  --accent-chat: #0b7a39;
  --accent-sind: #473ac2;
  --accent-assina: #a8176d;
  --accent-ped: #855900;
  --accent-med: #1f5dcc;
  --accent-portal: #08756b;
  --accent-eleitor: #344a9a;

  /* Neutros */
  --ink: #14122e;
  --ink-soft: #5b5875;
  --ink-faint: #6b667e;
  --line: #ece6de;
  --line-strong: #ddd6ca;

  /* Tipografia — só Inter, mais peso nos títulos */
  --font-display: "Inter", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;

  --fs-display: clamp(2.25rem, 4.5vw, 3.5rem);
  --fs-h2: clamp(1.75rem, 3vw, 2.5rem);
  --fs-h3: 1.25rem;
  --fs-body-lg: 1.125rem;
  --fs-body: 1rem;
  --fs-small: 0.875rem;

  /* Espaçamento */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4rem;
  --space-2xl: 5.5rem;

  /* Layout — arredondado, amigável */
  --container-max: 1200px;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-full: 999px;

  /* Motion */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 150ms;
  --dur-base: 220ms;

  /* Sombra — cards flutuam sobre a página */
  --shadow-card: 0 20px 40px -28px rgba(20, 18, 46, 0.28), 0 2px 10px -4px rgba(20, 18, 46, 0.06);
  --shadow-card-hover: 0 28px 48px -24px rgba(20, 18, 46, 0.32), 0 4px 14px -4px rgba(20, 18, 46, 0.1);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur-base: 0ms;
  }
}