/* ICEYP — Design Tokens
   Fuente de colores: logo_ICEYP.png (esfera azul + texto navy + acentos gris) */

:root {
  /* --- Color: marca --- */
  --color-brand-500: #1B7EC2;   /* azul medio del logo — CTAs primarios */
  --color-brand-600: #14639B;   /* hover/active de CTAs */
  --color-brand-100: #E4F2FA;   /* fondos suaves, hover de tarjetas */
  --color-brand-sky: #6EC1E8;   /* azul claro del degradado — acentos, gráficos */

  --color-navy-700: #1B3A5C;    /* texto de marca, headings, nav activo */
  --color-navy-900: #12283F;    /* headings de mayor peso, footer bg */

  --color-neutral-700: #4D4D4D; /* texto secundario, divisores (gris del logo) */
  --color-neutral-500: #7A7A7A; /* texto terciario, placeholders */
  --color-neutral-200: #E3E6EA; /* bordes, separadores suaves */
  --color-neutral-100: #F5F7FA; /* fondos de sección alternos */
  --color-white: #FFFFFF;

  --color-success-500: #2E9E5B; /* confirmaciones (formularios) */
  --color-danger-500: #C0392B;  /* errores de formulario */

  /* --- Color: uso semántico --- */
  --color-bg: var(--color-white);
  --color-bg-alt: var(--color-neutral-100);
  --color-text: var(--color-navy-900);
  --color-text-muted: var(--color-neutral-700);
  --color-link: var(--color-brand-500);
  --color-border: var(--color-neutral-200);

  /* --- Tipografía ---
     Headings: Jost (geométrica redondeada, heredera de Century Gothic)
     Cuerpo:   Work Sans (neutra, muy legible en texto corrido) */
  --font-heading: 'Jost', 'Century Gothic', 'Poppins', sans-serif;
  --font-body: 'Work Sans', 'Segoe UI', sans-serif;

  --fs-h1: clamp(2.25rem, 1.9rem + 1.5vw, 3.25rem);
  --fs-h2: clamp(1.75rem, 1.5rem + 1vw, 2.5rem);
  --fs-h3: clamp(1.375rem, 1.25rem + 0.5vw, 1.75rem);
  --fs-body-lg: 1.125rem;
  --fs-body: 1rem;
  --fs-small: 0.875rem;

  --lh-heading: 1.2;
  --lh-body: 1.6;

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

  /* --- Espaciado (escala 4px) --- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-24: 6rem;

  --container-max: 1200px;
  --container-pad: var(--space-6);

  /* --- Radios y sombras (minimalista, sutil) --- */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-full: 999px;

  --shadow-sm: 0 1px 3px rgba(18, 40, 63, 0.08);
  --shadow-md: 0 8px 24px rgba(18, 40, 63, 0.12);

  --transition-base: 180ms ease;
}