/* ═══════════════════════════════════════════════════════════════════════════
   TOKENS — Despacho Tirzo & Bautista Abogados
   Única fuente de color, tipografía, radios y espaciado.
   El resto del CSS CONSUME estas variables, nunca hardcodea.
   Reglas de marca: solo colores SÓLIDOS (sin degradados), esquinas CUADRADAS.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {

  /* ───────────────────────────── COLOR (paleta del cliente) ───────────────── */
  /* Marca: azul marino único para estructura, títulos y acentos. */
  --c-navy:        #184A78;   /* azul marino — header, footer, títulos, WA flotante */
  --c-navy-dark:   #123A5E;   /* marino más oscuro (hover de superficies marinas) */

  /* Neutros */
  --c-bg:          #FFFFFF;   /* fondo del sitio (TODAS las secciones = mismo) */
  --c-surface:     #F2F2F2;   /* gris claro — inputs, detalles (no fondo de sección) */
  --c-border:      #E2E6EB;   /* borde sutil de cards/inputs */
  --c-text:        #111111;   /* texto principal */
  --c-text-soft:   #4A4F57;   /* texto secundario/apoyo */
  --c-heading:     var(--c-navy);  /* títulos → marino (un solo color, regla 0.1 nº4) */
  --c-white:       #FFFFFF;   /* texto sobre azul marino */

  /* Overlays (color SÓLIDO semitransparente — NUNCA gradiente, regla 0.1 nº2) */
  --overlay-navy:  rgba(24, 74, 120, 0.55);  /* overlay del hero sobre imagen */

  /* ───────────────────────────── TIPOGRAFÍA ──────────────────────────────── */
  /* Texto y títulos: Montserrat - Botones: Raleway (reparto tipo Arochi & Lindner). */
  --font-display: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --font-body:    var(--font-display);
  --font-button:  "Raleway", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;

  /* Escala tipográfica (estándar de la casa) */
  --fs-xs:   0.75rem;    /* 12px */
  --fs-sm:   0.875rem;   /* 14px */
  --fs-base: 1rem;       /* 16px */
  --fs-lg:   1.125rem;   /* 18px */
  --fs-xl:   1.25rem;    /* 20px */
  --fs-2xl:  1.5rem;     /* 24px */
  --fs-3xl:  1.875rem;   /* 30px */
  --fs-4xl:  2.25rem;    /* 36px */
  --fs-5xl:  3rem;       /* 48px */

  /* Pesos */
  --fw-light:   300;
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-bold:    700;

  --lh-tight: 1.2;
  --lh-base:  1.6;

  /* ───────────────────────────── ESPACIADO ───────────────────────────────── */
  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-5:  1.5rem;
  --sp-6:  2rem;
  --sp-8:  3rem;
  --sp-10: 4rem;
  --sp-12: 5rem;
  --sp-16: 7rem;

  /* ───────────────────────────── RADIOS (ESQUINAS CUADRADAS) ──────────────── */
  /* Decisión del usuario: todo recto (radio 0). Solo círculos para flotantes. */
  --r-sm:    0;
  --r-md:    0;
  --r-lg:    0;
  --r-xl:    0;
  --r-btn:   0;      /* botones rectos */
  --r-round: 50%;    /* círculos: WA flotante, botón subir, avatares */

  /* ───────────────────────────── SOMBRAS (solo gris neutro, regla 0.1 nº8) ── */
  --sh-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
  --sh-md: 0 3px 10px rgba(0, 0, 0, 0.10);
  --sh-lg: 0 8px 24px rgba(0, 0, 0, 0.12);

  /* ───────────────────────────── LAYOUT ──────────────────────────────────── */
  --header-h:     88px;      /* altura estándar de la casa */
  --container:    100%;      /* contenido alineado con los extremos del header */
  --container-narrow: 100%;
  --pad-layout:   0.75rem;   /* mismo límite exterior en móvil y escritorio */

  /* ───────────────────────────── TRANSICIONES ────────────────────────────── */
  --t-fast: 0.15s ease;
  --t-base: 0.25s ease;
  --z-header: 500;
  --z-float:  60;
}