@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,200;0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;0,9..40,800;1,9..40,400;1,9..40,500&family=DM+Serif+Display:ital@0;1&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root {
  /* Colores principales */
  --gris-azulado:   #1E2A3A;
  --verde-profundo: #0F4C5C;
  --teal:           #17B3A3;
  --azul-grisaceo:  #5F7D95;

  /* Fondos */
  --fondo:          #F5F8FC;
  --white:          #ffffff;

  /* Textos */
  --gris-oscuro:    #1F2937;
  --gris-claro:     #DCE5EE;

  /* Estados */
  --teal-soft:      #E6F7F5;
  --teal-dark:      #0E8A7D;
  /* Teal accesible: para texto/links/botón/foco sobre fondo claro (WCAG AA: 5.2:1 en blanco,
     4.9:1 en --fondo). El --teal brillante se reserva para decoración/áreas grandes. */
  --teal-accesible: #0B7A6D;
  --danger:         #E74C3C;
  --danger-soft:    #FEF2F2;
  --danger-dark:    #C0392B;
  --warning-soft:   #FEF9E7;
  --warning-text:   #9A7B2C;
  --info-soft:      #EBF5FB;
  --info-text:      #2E86C1;

  /* Paleta funcional de firmantes (multi-firmante): relleno pastel + acento (borde/badge,
     contraste >=4.5:1 con texto blanco). Funcional, NO de marca. El rojo --danger queda
     reservado para errores; por eso el firmante 7 es rosa. Tope = tamaño de la paleta (7). */
  --signer-1-fill: #DBEAFE;  --signer-1-ink: #1C5FB5;  /* azul */
  --signer-2-fill: #DCFCE7;  --signer-2-ink: #237032;  /* verde */
  --signer-3-fill: #FFEDD5;  --signer-3-ink: #C2410C;  /* naranja */
  --signer-4-fill: #EDE9FE;  --signer-4-ink: #6D28D9;  /* morado */
  --signer-5-fill: #FEF3C7;  --signer-5-ink: #B45309;  /* amarillo */
  --signer-6-fill: #E5E7EB;  --signer-6-ink: #4B5563;  /* gris */
  --signer-7-fill: #FCE7F3;  --signer-7-ink: #BE185D;  /* rosa */

  /* Tipografia */
  --font-display:   'DM Serif Display', Georgia, serif;
  --font-body:      'DM Sans', system-ui, sans-serif;
  --font-mono:      'IBM Plex Mono', monospace;

  /* Tamaños de texto */
  --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;

  /* Espaciado */
  --spacing-xs:  4px;
  --spacing-sm:  8px;
  --spacing-md:  16px;
  --spacing-lg:  24px;
  --spacing-xl:  32px;
  --spacing-2xl: 48px;

  /* Bordes y sombras */
  --radius:    10px;
  --radius-sm: 6px;
  --radius-lg: 16px;
  --shadow:    0 1px 8px rgba(30, 42, 58, 0.06);
  --shadow-md: 0 4px 20px rgba(30, 42, 58, 0.10);
}