/* ============================================================
   variables.css — Design Tokens (Design System OdontoVila)
   Fonte: brief de design da Dra. Márcia Limonge
   ============================================================ */

:root {
  /* ---------- Cores: Identidade (teal) ---------- */
  --teal-base: #0FA39C;
  --teal-deep: #0B7A74;
  --teal-tint: #E6F5F4;

  /* ---------- Cores: Ação / Conversão WhatsApp (laranja) ---------- */
  --action-base: #F15A29;
  --action-deep: #D8481E;
  --action-tint: #FCE8E0;

  /* ---------- Neutros ---------- */
  --ink: #14252B;
  --ink-soft: #3C4E54;        /* texto secundário derivado do ink */
  --paper: #FAF8F5;
  --white: #FFFFFF;
  --line: #DCE4E2;

  /* ---------- Tipografia ---------- */
  --font-display: 'Sora', system-ui, -apple-system, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'Space Mono', 'Courier New', monospace;

  --tracking-eyebrow: 0.08em;

  /* ---------- Raio ---------- */
  --radius-sm: 8px;
  --radius-btn: 10px;
  --radius-card: 20px;
  --radius-pill: 999px;

  /* ---------- Sombras (sempre tingidas, nunca preto puro) ---------- */
  --shadow-card: 0 8px 24px rgba(15, 163, 156, 0.12);
  --shadow-card-hover: 0 16px 40px rgba(15, 163, 156, 0.18);
  --shadow-cta: 0 6px 20px rgba(241, 90, 41, 0.28);
  --shadow-cta-hover: 0 10px 28px rgba(241, 90, 41, 0.38);
  --shadow-header: 0 2px 12px rgba(20, 37, 43, 0.08);
  --shadow-soft: 0 4px 16px rgba(20, 37, 43, 0.06);

  /* ---------- Espaçamento (grid base 8px) ---------- */
  --space-unit: 8px;
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 40px;
  --space-6: 48px;
  --space-8: 64px;
  --space-10: 80px;
  --space-12: 96px;

  /* Espaço vertical entre seções */
  --section-gap: clamp(56px, 8vw, 96px);
  /* Espaço interno de cards */
  --card-pad: clamp(24px, 4vw, 32px);

  /* ---------- Layout ---------- */
  --container-max: 1180px;
  --reading-max: 640px;
  --container-pad: clamp(20px, 5vw, 40px);

  --header-h: 76px;
  --header-h-scrolled: 64px;

  /* ---------- Movimento ---------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 160ms;
  --dur-base: 200ms;
  --dur-slow: 400ms;

  /* ---------- Z-index ---------- */
  --z-header: 100;
  --z-float: 90;
  --z-backtop: 80;
  --z-overlay: 110;
}