/* ============================================================
   VARIABLES — Design Tokens
   ============================================================ */

:root {
  /* ---- Cores ---- */
  --color-primary: #6d28a8;
  --color-primary-dark: #591f8c;
  --color-secondary: #3b82f6;

  --color-bg: #ffffff;
  --color-bg-alt: #f8fafc;
  --color-card: #ffffff;

  --color-text: #111827;
  --color-text-muted: #6b7280;
  --color-border: #e5e7eb;

  /* Gradiente de destaque (primária → secundária) */
  --gradient-brand: linear-gradient(135deg, var(--color-primary), var(--color-secondary));

  /* Superfícies e realces translúcidos */
  --color-primary-soft: rgba(109, 40, 168, 0.08);
  --color-secondary-soft: rgba(59, 130, 246, 0.1);

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

  --fs-hero: clamp(2.5rem, 5vw + 1rem, 3.75rem);   /* ~40–60px */
  --fs-section: clamp(1.875rem, 3vw + 1rem, 2.5rem); /* ~30–40px */
  --fs-subtitle: 1.5rem;   /* 24px */
  --fs-card: 1.375rem;     /* 22px */
  --fs-body: 1.125rem;     /* 18px */
  --fs-small: 0.875rem;    /* 14px */

  --lh-tight: 1.2;
  --lh-body: 1.7;

  /* ---- Layout ---- */
  --container: 1200px;
  --container-pad: 24px;
  --section-gap: 120px;
  --radius-sm: 8px;
  --radius: 10px;
  --radius-lg: 18px;
  --radius-pill: 999px;

  /* ---- Sombras ---- */
  --shadow-card: 0 8px 24px rgba(0, 0, 0, 0.08);
  --shadow-hover: 0 16px 40px rgba(0, 0, 0, 0.12);
  --shadow-header: 0 1px 0 rgba(17, 24, 39, 0.06);
  --shadow-focus: 0 0 0 3px rgba(109, 40, 168, 0.18);

  /* ---- Movimento ---- */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --transition: 250ms var(--ease);
  --transition-slow: 500ms var(--ease);

  /* ---- Header ---- */
  --header-height: 80px;

  /* ---- Camadas ---- */
  --z-header: 100;
  --z-mobile-menu: 90;
  --z-back-to-top: 80;
}