/* ==========================================================================
   Design tokens — Cicatriza
   Edite aqui paleta, tipografia, espaçamento e motion. Nada de valores
   hardcoded espalhados pelo resto do CSS.
   ========================================================================== */

:root {
  /* ---- Cor ------------------------------------------------------------- */
  /* Direção: identidade RAC VitalCure — navy profundo (fundo da logo) +
     ciano-azulado ("VitalCure") como cor semântica, sobre off-white frio. */
  --color-bg:            oklch(98% 0.004 240);    /* off-white frio */
  --color-bg-alt:        oklch(96% 0.012 235);    /* faixa de seção alternada (leve azul) */
  --color-surface:       oklch(100% 0 0);
  --color-surface-2:     oklch(98% 0.008 235);

  --color-ink:           oklch(27% 0.045 255);    /* navy — texto forte */
  --color-ink-soft:      oklch(44% 0.035 250);    /* texto corrido */
  --color-muted:         oklch(58% 0.025 248);    /* texto auxiliar */
  --color-line:          oklch(90% 0.015 240);    /* bordas/divisores */

  --color-primary:       oklch(58% 0.105 235);    /* ciano-azul principal (VitalCure) */
  --color-primary-deep:  oklch(48% 0.10 240);     /* hover/escuro */
  --color-primary-soft:  oklch(95% 0.035 230);    /* fundos sutis */
  --color-primary-ink:   oklch(40% 0.085 240);    /* texto sobre soft */

  --color-accent:        oklch(68% 0.11 222);     /* ciano claro (ícone da logo) — gradientes/realces */
  --color-accent-soft:   oklch(95% 0.035 225);

  --color-whatsapp:      oklch(64% 0.16 150);     /* verde de ação/contato (mantido) */
  --color-whatsapp-deep: oklch(56% 0.16 150);

  --color-on-primary:    oklch(99% 0.01 235);
  --color-on-dark:       oklch(96% 0.012 240);

  /* Superfície escura (footer / CTA final) — navy EXATO da logo (#000f2e) */
  --color-dark:          #000f2e;
  --color-dark-2:        #000f2e;

  /* ---- Tipografia (sans geométrico pesado — estilo da referência) ------ */
  --font-display: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body:    "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  --text-xs:   0.78rem;
  --text-sm:   0.875rem;
  --text-base: clamp(1rem, 0.96rem + 0.2vw, 1.075rem);
  --text-lg:   clamp(1.125rem, 1.04rem + 0.4vw, 1.3rem);
  --text-xl:   clamp(1.35rem, 1.2rem + 0.7vw, 1.7rem);
  --text-2xl:  clamp(1.7rem, 1.4rem + 1.4vw, 2.4rem);
  --text-3xl:  clamp(2.1rem, 1.6rem + 2.4vw, 3.4rem);
  --text-hero: clamp(2.5rem, 1.6rem + 4vw, 4.6rem);

  --leading-tight: 1.08;
  --leading-snug:  1.25;
  --leading-body:  1.65;

  --tracking-tight: -0.02em;
  --tracking-wide:  0.08em;

  /* ---- Espaçamento ----------------------------------------------------- */
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.5rem;
  --space-6:  2rem;
  --space-7:  3rem;
  --space-8:  4rem;
  --space-section: clamp(4rem, 3rem + 6vw, 8.5rem);

  --container:      72rem;
  --container-tight: 56rem;
  --gutter: clamp(1.25rem, 4vw, 3rem);

  /* ---- Forma ----------------------------------------------------------- */
  --radius-sm: 0.5rem;
  --radius:    0.9rem;
  --radius-lg: 1.4rem;
  --radius-xl: 2rem;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px oklch(30% 0.03 200 / 0.06);
  --shadow:    0 6px 24px -10px oklch(30% 0.03 200 / 0.18);
  --shadow-lg: 0 24px 60px -24px oklch(30% 0.04 200 / 0.28);

  /* ---- Motion ---------------------------------------------------------- */
  --duration-fast:   150ms;
  --duration-normal: 320ms;
  --duration-slow:   620ms;
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);
}