/* ==========================================================================
   TOKENS — Design System
   Camada 1 de 5. Nenhum seletor de elemento aqui: apenas custom properties.
   Alterar todo o visual da landing page a partir deste arquivo.
   ========================================================================== */

:root {
  /* ---------------------------------------------------------------------
     1. CORES — Azulmarinho (brand) + neutros frios
     --------------------------------------------------------------------- */
  --blue-50: #eef4ff;
  --blue-100: #dbe7fe;
  --blue-200: #bfd7fe;
  --blue-300: #93bbfd;
  --blue-400: #6098fa;
  --blue-500: #3b78f6;
  --blue-600: #2563eb;
  --blue-700: #1d4ed8;
  --blue-800: #1b3fa8;
  --blue-900: #1a3484;
  --blue-950: #0f1f4d;

  --navy-800: #101f3f;
  --navy-900: #0a1730;
  --navy-950: #060e1f;

  --n-0: #ffffff;
  --n-25: #fbfcfe;
  --n-50: #f7f9fc;
  --n-100: #eef2f7;
  --n-150: #e7ecf4;
  --n-200: #dfe6f0;
  --n-300: #c9d3e2;
  --n-400: #9aa8bd;
  --n-500: #6b7a91;
  --n-600: #515f76;
  --n-700: #3a475d;
  --n-800: #232f42;
  --n-900: #101827;
  --n-950: #080d17;

  --cyan-300: #7dd3fc;
  --cyan-400: #38bdf8;
  --cyan-500: #0ea5e9;

  --green-500: #10b981;
  --green-600: #059669;
  --amber-400: #fbbf24;
  --amber-500: #f59e0b;
  --rose-500: #f43f5e;
  --whatsapp: #25d366;
  --whatsapp-dark: #128c7e;

  /* ------------------------------- Semânticas ------------------------- */
  --brand: var(--blue-600);
  --brand-strong: var(--blue-700);
  --brand-soft: var(--blue-50);
  --brand-line: var(--blue-200);
  --bg: var(--n-0);
  --bg-alt: var(--n-50);
  --surface: var(--n-0);
  --surface-2: var(--n-25);

  --text: var(--n-900);
  --text-soft: var(--n-600);
  --text-muted: var(--n-500);
  --text-faint: var(--n-400);
  --text-inverse: #ffffff;
  --text-inverse-soft: rgba(255, 255, 255, 0.72);
  --text-inverse-faint: rgba(255, 255, 255, 0.55);

  --line: var(--n-200);
  --line-soft: var(--n-150);

  --success: var(--green-600);
  --success-soft: #e7f8f1;
  --warning: var(--amber-500);
  --warning-soft: #fef5e6;

  /* Gradientes */
  --grad-brand: linear-gradient(135deg, var(--blue-500) 0%, var(--blue-700) 55%, var(--blue-900) 100%);
  --grad-accent-line: linear-gradient(90deg, var(--blue-600), var(--cyan-400));
  --grad-navy: linear-gradient(160deg, var(--navy-900) 0%, var(--navy-950) 55%, #04091a 100%);
  --grad-navy-glow: radial-gradient(60% 60% at 50% 0%, rgba(37, 99, 235, 0.5) 0%, rgba(37, 99, 235, 0) 100%);
  --grad-shimmer: linear-gradient(100deg, rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, 0.45) 50%, rgba(255, 255, 255, 0) 80%);

  /* ---------------------------------------------------------------------
     2. TIPOGRAFIA
     --------------------------------------------------------------------- */
  --font-display: "Plus Jakarta Sans", "Inter", ui-sans-serif, system-ui, -apple-system,
    "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-body: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "JetBrains Mono", "SFMono-Regular", "Consolas",
    "Liberation Mono", monospace;

  --fs-2xs: 0.6875rem; /* 11px */
  --fs-xs: 0.75rem; /* 12px */
  --fs-sm: 0.8125rem; /* 13px */
  --fs-base: clamp(0.9375rem, 0.9rem + 0.18vw, 1rem);
  --fs-md: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  --fs-lg: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  --fs-xl: clamp(1.125rem, 1.04rem + 0.42vw, 1.3125rem);
  --fs-2xl: clamp(1.25rem, 1.12rem + 0.62vw, 1.5rem);
  --fs-4xl: clamp(1.625rem, 1.3rem + 1.6vw, 2.375rem);
  --fs-5xl: clamp(1.875rem, 1.42rem + 2.25vw, 3rem);
  --fs-6xl: clamp(2.125rem, 1.5rem + 3.1vw, 3.75rem);
  --lh-snug: 1.2;
  --lh-normal: 1.45;
  --lh-relaxed: 1.65;

  --ls-2xs: 0.16em;
  --ls-xs: 0.1em;
  --ls-sm: 0.02em;
  --ls-tighter: -0.03em;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;

  /* ---------------------------------------------------------------------
     3. ESPAÇAMENTO (escala de 4px com Steps)
     --------------------------------------------------------------------- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.25rem;
  --sp-6: 1.5rem;
  --sp-7: 1.75rem;
  --sp-8: 2rem;
  --sp-10: 2.5rem;
  --section-y: clamp(3.5rem, 2rem + 6vw, 7rem);
  --gutter: clamp(1.125rem, 0.6rem + 2.4vw, 2.5rem);

  /* ---------------------------------------------------------------------
     4. LAYOUT
     --------------------------------------------------------------------- */
  --container: 1200px;
  --container-narrow: 860px;
  --header-h: 76px;
  --header-h-scrolled: 64px;

  /* ---------------------------------------------------------------------
     5. RAIOS
     --------------------------------------------------------------------- */
  --r-2xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 18px;
  --r-xl: 24px;
  --r-2xl: 30px;
  --r-pill: 999px;

  /* ---------------------------------------------------------------------
     6. SOMBRAS — camadas suaves, nunca "borrão" único
     --------------------------------------------------------------------- */
  --sh-xs: 0 1px 2px rgba(16, 24, 39, 0.05);
  --sh-sm: 0 1px 2px rgba(16, 24, 39, 0.04), 0 2px 6px rgba(16, 24, 39, 0.05);
  --sh-md: 0 2px 4px rgba(16, 24, 39, 0.03), 0 8px 20px rgba(16, 24, 39, 0.07);
  --sh-lg: 0 4px 8px rgba(16, 24, 39, 0.03), 0 18px 40px rgba(16, 24, 39, 0.1);
  --sh-xl: 0 8px 16px rgba(16, 24, 39, 0.04), 0 32px 70px rgba(16, 24, 39, 0.13);
  --sh-brand: 0 6px 14px rgba(37, 99, 235, 0.2), 0 18px 40px rgba(37, 99, 235, 0.18);
  --sh-brand-lg: 0 10px 22px rgba(37, 99, 235, 0.24), 0 30px 70px rgba(37, 99, 235, 0.24);
  /* ---------------------------------------------------------------------
     7. BORDAS
     --------------------------------------------------------------------- */
  --bw-hair: 1px;
  --bw: 1px;
  /* ---------------------------------------------------------------------
     8. MOVIMENTO
     --------------------------------------------------------------------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --t-fast: 140ms;
  --t-base: 220ms;
  --t-slow: 340ms;
  --t-slower: 480ms;
  /* ---------------------------------------------------------------------
     9. Z-INDEX
     --------------------------------------------------------------------- */
  --z-below: -1;
  --z-sticky: 100;
  --z-header: 200;
  --z-modal: 400;
  --z-float: 250;
  --z-toast: 500;

  /* ---------------------------------------------------------------------
     10. UTILITÁRIOS
     --------------------------------------------------------------------- */
  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E");
}/* Tema das seções escuras (aplicado via .on-navy no markup) */
.on-navy {
  --bg: transparent;
  --surface: rgba(255, 255, 255, 0.04);
  --surface-2: rgba(255, 255, 255, 0.06);
  --text: #ffffff;
  --text-soft: var(--text-inverse-soft);
  --text-muted: var(--text-inverse-faint);
  --line: rgba(255, 255, 255, 0.12);
  --line-soft: rgba(255, 255, 255, 0.07);
}
/* Tema do plano em destaque (Profissional) */
.on-brand {
  --text: #ffffff;
  --text-soft: rgba(255, 255, 255, 0.76);
  --text-muted: rgba(255, 255, 255, 0.58);
  --text-faint: rgba(255, 255, 255, 0.42);
  --line: rgba(255, 255, 255, 0.16);
  --line-soft: rgba(255, 255, 255, 0.1);
  --success-soft: rgba(16, 185, 129, 0.2);
}