/* ==========================================================================
   Tokens de diseño — Proyectos JPC
   Paleta oficial tomada de "Proyectos JPC/Paleta de colores.md".
   Los tonos "derivados" son variaciones del azul oscuro para fondos y texto.
   ========================================================================== */

:root {
  /* Paleta oficial */
  --jpc-azul-oscuro: #00498d;
  --jpc-azul-claro: #4eb7c4;
  --jpc-verde: #99c23c;
  --jpc-gris: #55595b;

  /* Derivados */
  --jpc-azul-950: #021f3a;
  --jpc-azul-900: #032747;
  --jpc-azul-800: #003a70;
  --jpc-azul-100: #dcebf6;
  --jpc-azul-50: #eef5fa;
  --jpc-verde-oscuro: #5d7a1c;

  /* Roles */
  --c-bg: #ffffff;
  --c-bg-alt: #f3f6f9;
  --c-text: var(--jpc-gris);
  --c-heading: var(--jpc-azul-900);
  --c-link: var(--jpc-azul-oscuro);
  --c-line: #dbe3ea;
  --c-error: #b42318;
  --c-success: #3f6212;
  --c-focus: var(--jpc-azul-claro);

  /* Tipografía */
  --font-body: "Barlow", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Barlow Semi Condensed", "Barlow", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  --step--1: clamp(0.875rem, 0.85rem + 0.1vw, 0.9375rem);
  --step-0: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  --step-1: clamp(1.125rem, 1.06rem + 0.3vw, 1.3125rem);
  --step-2: clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem);
  --step-3: clamp(1.75rem, 1.4rem + 1.6vw, 2.625rem);
  --step-4: clamp(2.125rem, 1.5rem + 3vw, 3.75rem);

  /* Espaciado */
  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-s: 0.75rem;
  --space-m: 1rem;
  --space-l: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: clamp(3.5rem, 2.5rem + 5vw, 6.5rem);

  /* Forma */
  --radius-s: 6px;
  --radius-m: 12px;
  --radius-l: 20px;
  --radius-pill: 999px;
  --shadow-s: 0 1px 2px rgb(3 39 71 / 0.06), 0 1px 3px rgb(3 39 71 / 0.08);
  --shadow-m: 0 6px 16px -4px rgb(3 39 71 / 0.12), 0 2px 6px rgb(3 39 71 / 0.06);
  --shadow-l: 0 24px 48px -16px rgb(3 39 71 / 0.28);

  /* Layout */
  --container: 72rem;
  --gutter: clamp(1rem, 0.6rem + 2vw, 2rem);
  --header-h: 4.25rem;

  /* Movimiento */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur: 200ms;
}

@media (min-width: 64rem) {
  :root {
    --header-h: 5rem;
  }
}