/* ─── Design System — Balent — tokens.css ────────────────────
   Colores extraídos del logotipo. No escribir reglas aquí.
   Logo oscuro: fondo #0D3461, texto blanco.
   Logo claro:  texto #4B4B4B, cuadro acento #0D3461.
──────────────────────────────────────────────────────────── */
:root {
  /* Marca */
  --color-primary:        #0D3461;
  --color-primary-hover:  #0B2C54;
  --color-primary-light:  #1A4A82;
  --color-primary-subtle: #EEF3FA;

  --color-gray:           #4B4B4B;
  --color-gray-mid:       #717171;
  --color-gray-light:     #9E9E9E;

  --color-white:          #FFFFFF;
  --color-surface:        #F5F7FB;
  --color-surface-2:      #EBF0F8;
  --color-border:         #D8DFE9;

  /* Tipografía */
  --font-heading: 'Nunito', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, sans-serif;

  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  1.875rem;
  --text-4xl:  2.5rem;
  --text-5xl:  3.25rem;

  /* Espaciado (base 4 px) */
  --s1:  0.25rem;
  --s2:  0.5rem;
  --s3:  0.75rem;
  --s4:  1rem;
  --s5:  1.25rem;
  --s6:  1.5rem;
  --s8:  2rem;
  --s10: 2.5rem;
  --s12: 3rem;
  --s16: 4rem;
  --s20: 5rem;
  --s24: 6rem;

  /* Radio */
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 16px;

  /* Sombras */
  --shadow-sm: 0 1px 3px rgba(13, 52, 97, 0.08);
  --shadow-md: 0 4px 12px rgba(13, 52, 97, 0.12);
  --shadow-lg: 0 8px 28px rgba(13, 52, 97, 0.18);
}