/* ==========================================================================
   Fyntech — Design tokens (identidade visual)
   --------------------------------------------------------------------------
   Paleta extraída das fontes oficiais do projeto:
     • --fyntech-primary  #4C266C  -> roxo do logotipo oficial (Example/logo.pdf)
     • tons de apoio       -> amostrados dos mockups de referência (Example/codex.png)
   Nenhum valor aqui é arbitrário: todos vêm do material da marca.
   ========================================================================== */
:root {
  /* ---------- Marca ---------- */
  --fyntech-primary: #4c266c;        /* roxo oficial do logotipo */
  --fyntech-primary-dark: #2e1544;
  --fyntech-primary-light: #6b3a93;

  /* Violeta vibrante das superfícies e CTAs (mockups) */
  --fyntech-violet: #8b3cea;
  --fyntech-violet-dark: #6d28c9;
  --fyntech-violet-deep: #3c1e7e;
  --fyntech-violet-light: #a855f7;   /* destaque tipográfico ("sem limites") */

  /* ---------- Escala de lilases ---------- */
  --fyntech-purple-50: #f8f5fd;
  --fyntech-purple-100: #f0e9fc;
  --fyntech-purple-200: #ddc9fb;
  --fyntech-purple-300: #c9a8f8;

  /* ---------- Superfícies ---------- */
  --fyntech-surface: #ffffff;
  --fyntech-surface-soft: #f6f6fc;   /* seções claras (mockup) */
  --fyntech-surface-alt: #fcfcfc;
  --fyntech-ink: #0c0c24;            /* footer — azul-marinho/roxo escuro */
  --fyntech-ink-hero: #120c36;       /* fundo da hero */

  /* ---------- Texto ---------- */
  --fyntech-text: #14122b;
  --fyntech-heading: #0d0b24;
  --fyntech-muted: #5f5a77;
  --fyntech-on-dark: #ffffff;
  --fyntech-on-dark-muted: #c9c2e4;

  /* ---------- Bordas e linhas ---------- */
  --fyntech-border: #e7e3f0;
  --fyntech-border-strong: #d6cfe6;
  --fyntech-border-dark: rgba(255, 255, 255, 0.12);

  /* ---------- Apoio ---------- */
  --fyntech-whatsapp: #25d366;
  --fyntech-whatsapp-dark: #1da851;
  --fyntech-focus: #a855f7;

  /* ---------- Gradientes ---------- */
  --gradient-hero: radial-gradient(120% 120% at 78% 18%, #45209b 0%, #2a1263 38%, #120c36 72%);
  --gradient-violet: linear-gradient(135deg, #6d28c9 0%, #8b3cea 100%);
  --gradient-banner: linear-gradient(115deg, #3c1e7e 0%, #5b2ca8 52%, #7b35d4 100%);
  --gradient-soft: linear-gradient(180deg, #ffffff 0%, #f6f6fc 100%);
  --gradient-lilac: linear-gradient(160deg, #f8f5fd 0%, #f0e9fc 100%);

  /* ---------- Tipografia ---------- */
  --font-heading: "Poppins", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  --font-body: "Inter", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;

  /* Escala fluida — evita "desktop espremido" no mobile */
  --fs-display: clamp(2.35rem, 1.35rem + 3.6vw, 4rem);
  --fs-h1: clamp(2rem, 1.35rem + 2.6vw, 3.25rem);
  --fs-h2: clamp(1.6rem, 1.2rem + 1.7vw, 2.5rem);
  --fs-h3: clamp(1.15rem, 1rem + 0.6vw, 1.45rem);
  --fs-lead: clamp(1rem, 0.95rem + 0.35vw, 1.15rem);
  --fs-body: 1rem;
  --fs-sm: 0.9375rem;
  --fs-xs: 0.8125rem;

  /* ---------- Formas ---------- */
  --radius-xs: 8px;
  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 22px;
  --radius-xl: 28px;
  --radius-2xl: 36px;
  --radius-pill: 999px;

  /* ---------- Layout ---------- */
  --container-width: 1200px;
  --container-pad: clamp(1rem, 0.6rem + 1.6vw, 2rem);
  --section-pad: clamp(3.5rem, 2rem + 5vw, 6.5rem);
  --header-height: 78px;

  /* ---------- Sombras ---------- */
  --shadow-xs: 0 1px 2px rgba(12, 12, 36, 0.06);
  --shadow-sm: 0 4px 16px rgba(12, 12, 36, 0.06);
  --shadow-md: 0 14px 38px rgba(46, 21, 68, 0.1);
  --shadow-lg: 0 26px 64px rgba(46, 21, 68, 0.16);
  --shadow-violet: 0 18px 40px rgba(139, 60, 234, 0.28);
  --shadow-violet-lg: 0 26px 60px rgba(139, 60, 234, 0.36);
  --glow-violet: 0 0 0 1px rgba(168, 85, 247, 0.18), 0 20px 50px rgba(139, 60, 234, 0.22);

  /* ---------- Movimento ---------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --t-fast: 0.18s var(--ease-out);
  --t-base: 0.28s var(--ease-out);
  --t-slow: 0.42s var(--ease-out);
}