/* ============================================================
   DESIGN TOKENS — Emagrecimento em Belém (Dra. Milani Finotelo)
   Sistema: "clínico futurista" — confiança médica + estética tech
   ============================================================ */

:root {
  /* ---------- Superfícies claras (base do site, ~70%) ---------- */
  --bg: #f6faf9;
  --surface: #ffffff;
  --surface-2: #eef6f4;
  --surface-3: #e3f0ed;
  --line: rgba(9, 38, 40, 0.09);
  --line-strong: rgba(9, 38, 40, 0.16);

  /* ---------- Texto ---------- */
  --ink: #0b2224;
  --ink-soft: #33494c;
  --muted: #5f7377;
  --muted-2: #7c8e91;

  /* ---------- Marca ---------- */
  --brand: #0e8a72;
  --brand-2: #096354;
  --brand-light: #17c79a;
  --gold: #c9a24d;
  --gold-light: #e6c987;
  --violet: #6c5ce7;
  --cyan: #22d3ee;

  /* ---------- Gradientes ---------- */
  --grad-brand: linear-gradient(135deg, #0e8a72 0%, #17c79a 55%, #22d3ee 100%);
  --grad-brand-2: linear-gradient(120deg, #096354 0%, #0e8a72 100%);
  --grad-gold: linear-gradient(135deg, #c9a24d 0%, #e6c987 100%);
  --grad-violet: linear-gradient(135deg, #6c5ce7 0%, #22d3ee 100%);
  --grad-mesh-dark:
    radial-gradient(circle at 15% 20%, rgba(23, 199, 154, 0.28) 0%, transparent 42%),
    radial-gradient(circle at 85% 15%, rgba(108, 92, 231, 0.24) 0%, transparent 40%),
    radial-gradient(circle at 75% 85%, rgba(34, 211, 238, 0.18) 0%, transparent 45%),
    radial-gradient(circle at 20% 90%, rgba(201, 162, 77, 0.14) 0%, transparent 40%);

  /* ---------- Superfícies escuras (hero / seções de autoridade, ~10-15%) ---------- */
  --dark-bg: #051618;
  --dark-bg-2: #0a2427;
  --dark-surface: rgba(255, 255, 255, 0.045);
  --dark-surface-strong: rgba(255, 255, 255, 0.075);
  --dark-line: rgba(255, 255, 255, 0.1);
  --dark-ink: #eaf7f4;
  --dark-muted: #bfdedb;

  /* ---------- Sombras ---------- */
  --shadow-xs: 0 2px 8px rgba(6, 26, 28, 0.06);
  --shadow-sm: 0 6px 18px rgba(6, 26, 28, 0.08);
  --shadow-md: 0 14px 34px rgba(6, 26, 28, 0.12);
  --shadow-lg: 0 24px 60px rgba(6, 26, 28, 0.18);
  --glow-brand: 0 0 0 1px rgba(23, 199, 154, 0.35), 0 12px 40px rgba(14, 138, 114, 0.28);
  --glow-gold: 0 0 0 1px rgba(201, 162, 77, 0.35), 0 12px 32px rgba(201, 162, 77, 0.22);

  /* ---------- Raio ---------- */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 30px;
  --r-full: 999px;

  /* ---------- Espaçamento ---------- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;

  /* ---------- Tipografia ---------- */
  --font-display: "Space Grotesk", "Poppins", "Segoe UI", sans-serif;
  --font-body: "Inter", "Segoe UI", -apple-system, BlinkMacSystemFont, sans-serif;

  /* ---------- Transições ---------- */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --t-fast: 160ms var(--ease);
  --t-base: 260ms var(--ease);
  --t-slow: 480ms var(--ease);

  /* ---------- Layout ---------- */
  --container: 1200px;
  --container-narrow: 860px;
  --header-h: 84px;
}