/* ==========================================================================
   ClinicusMed — Design System v2 (Premium)
   Etapa 1 — Variáveis, paleta e tipografia
   ==========================================================================
   Namespace: todas as variáveis usam o prefixo --cx- (Clinicus eXperience)
   pra não colidir com as variáveis atuais (--bg, --green, --gold, etc.)
   já em uso no restante do site. Isso permite adotar o novo sistema
   componente por componente, nas próximas etapas, sem quebrar nada que
   já está no ar.
   ========================================================================== */

:root{
  /* ---- Cor base ---- */
  --cx-bg:            #030707;   /* fundo principal, quase preto */
  --cx-surface:        #0F1115;  /* superfície de cards/painéis */
  --cx-surface-2:      #171A20;  /* superfície elevada (hover, modais) */

  /* ---- Cor de destaque ---- */
  --cx-green:          #1DB954;  /* verde — uso pontual, nunca como cor de fundo grande */
  --cx-green-light:    #7DFFC1;  /* verde claro — glow, hover, texto de destaque */
  --cx-gold:           #D8A53B;  /* dourado — reservado a elementos premium/planos */

  /* ---- Neutros ---- */
  --cx-white:          #FFFFFF;
  --cx-gray:           #A5A5A5;  /* texto secundário */

  /* ---- Bordas e sombras (glassmorphism) ---- */
  --cx-border:              rgba(255,255,255,.08);
  --cx-border-strong:       rgba(255,255,255,.14);
  --cx-shadow-card:         0 30px 80px rgba(0,0,0,.35);
  --cx-shadow-card-hover:   0 40px 100px rgba(0,0,0,.45);
  --cx-glow-green:          0 0 60px rgba(29,185,84,.18);
  --cx-glow-gold:           0 0 60px rgba(216,165,59,.16);

  /* ---- Glass ---- */
  --cx-glass-bg:        rgba(15,17,21,.55);
  --cx-glass-blur:      20px;

  /* ---- Raio de borda ---- */
  --cx-radius-sm:  12px;
  --cx-radius-md:  18px;
  --cx-radius-lg:  24px;
  --cx-radius-pill: 999px;

  /* ---- Espaçamento (escala 4px) ---- */
  --cx-space-1: 4px;
  --cx-space-2: 8px;
  --cx-space-3: 12px;
  --cx-space-4: 16px;
  --cx-space-5: 24px;
  --cx-space-6: 32px;
  --cx-space-7: 48px;
  --cx-space-8: 64px;
  --cx-space-9: 96px;

  /* ---- Tipografia ---- */
  --cx-font-display: 'Cormorant Garamond', Georgia, serif;   /* títulos */
  --cx-font-body:    'General Sans', 'Inter', -apple-system, sans-serif; /* textos */

  --cx-fs-hero:    clamp(2.6rem, 5vw, 4.6rem);
  --cx-fs-h1:      clamp(2rem, 3.4vw, 3rem);
  --cx-fs-h2:      clamp(1.5rem, 2.4vw, 2.1rem);
  --cx-fs-h3:       1.25rem;
  --cx-fs-body-lg:  1.125rem;
  --cx-fs-body:     1rem;
  --cx-fs-small:    .875rem;
  --cx-fs-micro:    .75rem;

  --cx-lh-tight: 1.15;
  --cx-lh-normal: 1.55;

  /* ---- Transições ---- */
  --cx-transition-fast:   180ms cubic-bezier(.4,0,.2,1);
  --cx-transition-base:   300ms cubic-bezier(.4,0,.2,1);
  --cx-transition-slow:   500ms cubic-bezier(.4,0,.2,1);

  /* ---- Camadas (z-index) ---- */
  --cx-z-navbar: 100;
  --cx-z-modal: 200;
  --cx-z-toast: 300;
}

/* Respeita a preferência de movimento reduzido do usuário —
   qualquer animação construída nas próximas etapas deve checar isso. */
@media (prefers-reduced-motion: reduce) {
  :root{
    --cx-transition-fast: 0ms;
    --cx-transition-base: 0ms;
    --cx-transition-slow: 0ms;
  }
}