/* ==========================================================
   VARIABLES — colores, tipografía y espacios del sitio.
   Para cambiar la identidad visual, edita solo este archivo.
   ========================================================== */

:root {
  /* Colores */
  --color-ink: #0f1b3d;          /* texto principal y fondos oscuros */
  --color-ink-soft: #3a4668;     /* texto secundario */
  --color-primary: #3b4bff;      /* ultramar: enlaces y acentos */
  --color-primary-dark: #2733c9;
  --color-signal: #ffb000;       /* ámbar: acciones principales */
  --color-signal-dark: #e69d00;
  --color-paper: #f4f6fb;        /* fondo base */
  --color-white: #ffffff;
  --color-mist: #e3e8f5;         /* bordes y fondos suaves */
  --color-on-dark: #eef1ff;
  --color-on-dark-soft: #aab4d9;

  /* Tipografía */
  --font-display: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --font-body: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;

  /* Escala tipográfica */
  --fs-300: clamp(0.875rem, 0.85rem + 0.1vw, 0.9375rem);
  --fs-400: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
  --fs-500: clamp(1.125rem, 1.07rem + 0.25vw, 1.25rem);
  --fs-600: clamp(1.375rem, 1.25rem + 0.6vw, 1.75rem);
  --fs-700: clamp(1.75rem, 1.4rem + 1.6vw, 2.75rem);
  --fs-800: clamp(2.25rem, 1.6rem + 2.7vw, 3.85rem);

  /* Espacios */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.5rem;
  --space-5: 4rem;
  --space-6: clamp(4rem, 3rem + 5vw, 8rem);

  /* Layout */
  --container: 1180px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --header-h: 72px;

  /* Formas y sombras */
  --radius-s: 6px;
  --radius-m: 14px;
  --radius-l: 28px;
  --shadow-soft: 0 18px 40px -22px rgba(15, 27, 61, 0.35);

  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}