/**
 * Chambafluir design tokens v2
 */
:root {
  --cf-purple-900: #4c1d95;
  --cf-purple-800: #5b21b6;
  --cf-purple-700: #6d28d9;
  --cf-purple-500: #7c3aed;
  --cf-magenta-600: #c026d3;
  --cf-magenta-500: #ec4899;
  --cf-pink-300: #f9a8d4;
  --cf-pink-100: #fce7f3;
  --cf-lavender-50: #faf5ff;
  --cf-lavender-100: #f3e8ff;

  /* Support: trust (deep blue) + clarity/flow (cyan) — never primary CTAs */
  --cf-blue-900: #1e3a8a;
  --cf-blue-800: #1e40af;
  --cf-blue-700: #1d4ed8;
  --cf-blue-600: #2563eb;
  --cf-blue-100: #dbeafe;
  --cf-blue-50: #eff6ff;
  --cf-cyan-600: #0891b2;
  --cf-cyan-500: #06b6d4;
  --cf-cyan-400: #22d3ee;
  --cf-cyan-100: #cffafe;
  --cf-cyan-50: #ecfeff;
  --cf-aqua-400: #2dd4bf;

  --cf-ink: #0f172a;
  --cf-ink-soft: #334155;
  --cf-ink-muted: #64748b;
  --cf-line: #e2e8f0;
  --cf-line-soft: #f1f5f9;
  --cf-surface: #ffffff;
  --cf-surface-2: #f8fafc;
  --cf-dark: #0f172a;

  --cf-success: #059669;
  --cf-whatsapp: #25d366;
  --cf-whatsapp-dark: #128c7e;
  --cf-whatsapp-ink: #ffffff;

  --cf-gradient-brand: linear-gradient(135deg, #6d28d9 0%, #c026d3 48%, #ec4899 100%);
  --cf-gradient-brand-hover: linear-gradient(135deg, #5b21b6 0%, #a21caf 48%, #db2777 100%);
  --cf-gradient-soft: linear-gradient(165deg, #faf5ff 0%, #ffffff 36%, #fff7fb 70%, #fdf2f8 100%);
  --cf-gradient-dark: linear-gradient(135deg, #1e1b4b 0%, #5b21b6 50%, #9d174d 100%);
  --cf-gradient-card: linear-gradient(165deg, #ffffff 0%, #faf5ff 100%);
  /* Trust + clarity support gradients (icons, chips, subtle chrome only) */
  --cf-gradient-trust: linear-gradient(135deg, #1e40af 0%, #2563eb 55%, #0891b2 100%);
  --cf-gradient-flow: linear-gradient(135deg, #2dd4bf 0%, #22d3ee 55%, #06b6d4 100%);
  /* Mesh: brand whisper only — no blue/cyan (those live in formal/system zones) */
  --cf-gradient-mesh:
    radial-gradient(ellipse 50% 45% at 88% 8%, rgb(236 72 153 / 8%), transparent 55%),
    radial-gradient(ellipse 42% 40% at 8% 28%, rgb(124 58 237 / 7%), transparent 50%),
    radial-gradient(ellipse 36% 30% at 50% 100%, rgb(192 38 211 / 4%), transparent 50%);

  --cf-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --cf-display: clamp(2.4rem, 4.8vw, 3.75rem);
  --cf-h2: clamp(1.55rem, 2.6vw, 2.05rem);
  --cf-h3: 1.15rem;
  --cf-body: 1.0625rem;
  --cf-small: 0.875rem;
  --cf-eyebrow: 0.7rem;

  --cf-max: 1120px;
  /* Side gutters: never let CTAs hug the viewport edge at any width */
  --cf-pad: clamp(1.25rem, 4.5vw, 2.5rem);
  --cf-pad-safe-l: max(var(--cf-pad), env(safe-area-inset-left, 0px));
  --cf-pad-safe-r: max(var(--cf-pad), env(safe-area-inset-right, 0px));
  --cf-section: clamp(4.25rem, 9vw, 7rem);
  --cf-header-h: 5.25rem;
  --cf-radius-sm: 10px;
  --cf-radius-md: 14px;
  --cf-radius-lg: 20px;
  --cf-radius-xl: 28px;
  --cf-radius-full: 9999px;

  --cf-shadow-sm: 0 1px 2px rgb(15 23 42 / 4%), 0 1px 3px rgb(15 23 42 / 4%);
  --cf-shadow-md: 0 12px 32px rgb(109 40 217 / 11%);
  --cf-shadow-lg: 0 28px 64px rgb(109 40 217 / 15%);
  --cf-shadow-btn: 0 10px 24px rgb(192 38 211 / 30%);
  --cf-shadow-header: 0 4px 24px rgb(15 23 42 / 6%);

  /* Motion (WEB-CRAFT-STANDARD §4.2) — transform/opacity only */
  --cf-ease: 220ms cubic-bezier(0.22, 1, 0.36, 1);
  --cf-ease-out: 320ms cubic-bezier(0.22, 1, 0.36, 1);
  --cf-ease-spring: 400ms cubic-bezier(0.34, 1.3, 0.64, 1);
  --cf-duration-fast: 180ms;
  --cf-duration: 220ms;
  --cf-duration-out: 320ms;
}

@media (max-width: 768px) {
  :root {
    --cf-header-h: 4.5rem;
    --cf-body: 1rem;
    --cf-h3: 1.1rem;
  }
}

::selection {
  background: rgb(236 72 153 / 22%);
  color: var(--cf-ink);
}