/* ==========================================================================
   tokens.css — Design system: colores, tipografía, espaciado
   Serrato HH
   ========================================================================== */

:root {
  /* Colores de marca */
  --color-navy: #133a6d;       /* header, footer */
  --color-navy-dark: #0e2c54;
  --color-cream: #eae6e1;      /* sección "Cobertura" */
  --color-offwhite: #f5f5f5;   /* sección hero */
  --color-orange: #ffb433;     /* sección "Clientes" */
  --color-white: #ffffff;
  --color-black: #000000;

  /* Texto */
  --color-text: #1a1a1a;
  --color-text-on-dark: #ffffff;

  /* Tipografía */
  --font-heading: "Poppins", "Segoe UI", system-ui, sans-serif;
  --font-body: "Poppins", "Segoe UI", system-ui, sans-serif;

  --fs-h1: clamp(2rem, 4vw, 2.9rem);
  --fs-h2: clamp(1.75rem, 3.2vw, 2.6rem);
  --fs-body: 1rem;
  --fs-small: 0.875rem;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  --lh-heading: 1.25;
  --lh-body: 1.65;

  /* Espaciado */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 3rem;
  --space-6: 4rem;
  --space-7: 6rem;

  /* Layout */
  --container-max: 1200px;
  --container-pad: clamp(1.25rem, 4vw, 3rem);
  --radius: 8px;

  /* Transiciones */
  --transition: 0.2s ease;
}