/* ============================================================
   ELI Academy · Tokens del diseño (brand kit ELI 2025, mismo lenguaje que MyELI)
   Todo color, radio o sombra de css/ui/* sale de aquí.
   ============================================================ */

:root {
  /* Marca */
  --ui-red: #e10719;
  --ui-red-dark: #b80510;
  --ui-red-soft: #fdecee;
  --ui-teal: #11a19a;
  --ui-teal-soft: #e3f5f4;
  --ui-purple: #951b80;
  --ui-purple-soft: #f6e8f3;
  --ui-orange: #f9b234;
  --ui-orange-soft: #fff4e0;
  --ui-blue: #0f73ae;
  --ui-blue-soft: #e5f1f8;
  --ui-green: #0c8e36;
  --ui-green-soft: #e7f6ec;

  /* Superficies y texto */
  --ui-bg: #f5f6f8;
  --ui-surface: #ffffff;
  --ui-surface-2: #fafbfc;
  --ui-text: #1f2328;
  --ui-muted: #6b7280;
  --ui-subtle: #9ca3af;
  --ui-border: #e8e9ee;
  --ui-border-strong: #d9dbe2;

  /* Forma */
  --ui-radius: 16px;
  --ui-radius-md: 12px;
  --ui-radius-sm: 8px;
  --ui-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 4px 16px rgba(16, 24, 40, 0.06);
  --ui-shadow-md: 0 8px 24px rgba(16, 24, 40, 0.12);
  --ui-shadow-lg: 0 16px 48px rgba(16, 24, 40, 0.16);
  --ui-focus: 0 0 0 0.25rem rgba(225, 7, 25, 0.12);

  /* Tipografía */
  --ui-font: 'Raleway', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ui-font-display: 'Bebas Neue', 'Raleway', sans-serif;

  /* Acento principal (botones, enlaces, pestaña activa) */
  --ui-accent: var(--ui-red);
  --ui-accent-dark: var(--ui-red-dark);
  --ui-accent-soft: var(--ui-red-soft);

  /* Compatibilidad: las variables del site.css antiguo pasan a los tokens nuevos,
     así las pantallas que aún no se han rehecho ya cogen la paleta nueva. */
  --eli-header: var(--ui-red);
  --eli-header-hover: var(--ui-red-dark);
  --eli-section-nav: var(--ui-accent);
  --eli-primary: var(--ui-accent);
  --eli-primary-hover: var(--ui-accent-dark);
  --eli-primary-active: var(--ui-accent-dark);
  --eli-primary-shadow: rgba(225, 7, 25, 0.14);
  --eli-tabs: var(--ui-accent);

  /* Bootstrap */
  --bs-body-font-family: var(--ui-font);
  --bs-body-color: var(--ui-text);
  --bs-body-bg: var(--ui-surface); /* fondo de campos y tarjetas; el de la página lo pone body */
  --bs-border-color: var(--ui-border);
  --bs-link-color-rgb: 225, 7, 25;
  --bs-link-hover-color-rgb: 184, 5, 16;
}