:root {
  /* Cores — extraídas da identidade visual oficial Kommo */
  --color-primary: #0e0142;
  --color-primary-light: #2a1b66;
  --color-surface-accent: #f3efff;
  --color-white: #ffffff;

  /* CTA: azul vívido na linha da Kommo. Ajustável aqui caso queira mais fidelidade. */
  --color-cta: #2f6bff;
  --color-cta-hover: #1f52d6;

  --color-text-primary: #1a1530;
  --color-text-muted: #6b6680;
  --color-text-on-dark: #f3efff;

  --color-success: #1faa59;
  --color-error: #d63a3a;
  --color-border: #e4dffb;

  /* Tipografia */
  --font-family-base: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --fs-h1: clamp(2.1rem, 1.4rem + 3vw, 3.4rem);
  --fs-h2: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem);
  --fs-h3: clamp(1.15rem, 1rem + 0.6vw, 1.4rem);
  --fs-body: clamp(1rem, 0.95rem + 0.2vw, 1.125rem);
  --fs-small: 0.875rem;

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

  /* Heading -> paragraph: tier fixa (typeui/fundamentals spacing-principles) */
  --space-heading: 2rem;

  /* Layout */
  --container-width: 1180px;
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-full: 999px;

  --shadow-sm: 0 2px 8px rgba(14, 1, 66, 0.06);
  --shadow-md: 0 8px 24px rgba(14, 1, 66, 0.1);
  --shadow-lg: 0 16px 40px rgba(14, 1, 66, 0.16);
}