/* =================================================================
 * datalab-tokens.css
 * Sistema de Design Tokens canónico de DataLab — Unitrópico
 *
 * Esta es la ÚNICA fuente de verdad visual del DataLab.
 * Cualquier vista (landing, dashboard, operaciones, módulos) debe
 * importar este archivo y consumir las variables. Nada de colores
 * hardcodeados, nada de :root duplicados.
 *
 * Referencia visual: landing.html
 * Paleta institucional: verde #00594e + bronce #b5a160 (Unitrópico)
 * Tipografía: Outfit (display) + Source Sans 3 (cuerpo)
 * ================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800;900&family=Source+Sans+3:wght@400;500;600;700&display=swap');

:root {
  /* ─── Colores institucionales ────────────────────────── */
  --dl-green:           #00594e;   /* Verde Unitrópico (Pantone 329 CP) */
  --dl-green-dark:      #003d36;
  --dl-green-deep:      #00261f;
  --dl-green-light:     #007a6a;
  --dl-green-tint:      #e8f3f1;
  --dl-green-tintl:     #f4faf8;

  --dl-gold:            #b5a160;   /* Bronce Unitrópico (Pantone 4515 CP) */
  --dl-gold-soft:       #d4c388;
  --dl-gold-tint:       #f8f0de;

  /* ─── Colores de comunidad universitaria ─────────────── */
  /* Útiles para badges, chips y categorización por segmento */
  --dl-profesores:      #f59d15;
  --dl-administrativos: #006ab4;
  --dl-egresados:       #9e9e22;
  --dl-estudiantes:     #7dc189;

  /* ─── Neutros ────────────────────────────────────────── */
  --dl-ink:             #0f1f1c;
  --dl-text:            #1f2937;
  --dl-muted:           #5d6f6c;
  --dl-line:            rgba(15, 31, 28, 0.08);
  --dl-line-strong:     rgba(15, 31, 28, 0.14);

  --dl-white:           #ffffff;
  --dl-gray-50:         #f8fafa;
  --dl-gray-100:        #f1f5f4;
  --dl-gray-200:        #e4ebe9;
  --dl-gray-300:        #cdd7d4;
  --dl-gray-500:        #8a9a96;
  --dl-gray-700:        #4a5b58;
  --dl-gray-900:        #1f2c29;

  /* ─── Colores semánticos ─────────────────────────────── */
  --dl-success:         #047857;
  --dl-success-soft:    rgba(16, 185, 129, 0.12);
  --dl-warn:            #b45309;
  --dl-warn-soft:       rgba(245, 158, 11, 0.12);
  --dl-danger:          #b91c1c;
  --dl-danger-soft:     rgba(239, 68, 68, 0.12);
  --dl-info:            #1d4ed8;
  --dl-info-soft:       rgba(59, 130, 246, 0.12);

  /* ─── Tipografía ─────────────────────────────────────── */
  --dl-font-display:    'Outfit', system-ui, -apple-system, sans-serif;
  --dl-font-body:       'Source Sans 3', system-ui, -apple-system, sans-serif;
  --dl-font-mono:       ui-monospace, SFMono-Regular, Menlo, monospace;

  --dl-text-xs:         0.75rem;    /* 12px — etiquetas, metadatos */
  --dl-text-sm:         0.875rem;   /* 14px — texto auxiliar */
  --dl-text-base:       1rem;       /* 16px — cuerpo base */
  --dl-text-md:         1.125rem;   /* 18px — cuerpo destacado */
  --dl-text-lg:         1.25rem;    /* 20px — subtítulos */
  --dl-text-xl:         1.5rem;     /* 24px — H3 */
  --dl-text-2xl:        2rem;       /* 32px — H2 */
  --dl-text-3xl:        2.5rem;     /* 40px — H1 */
  --dl-text-4xl:        3rem;       /* 48px — hero */

  /* ─── Espaciado ──────────────────────────────────────── */
  --dl-space-1:         4px;
  --dl-space-2:         8px;
  --dl-space-3:         12px;
  --dl-space-4:         16px;
  --dl-space-5:         24px;
  --dl-space-6:         32px;
  --dl-space-8:         48px;
  --dl-space-10:        64px;
  --dl-space-12:        80px;

  /* ─── Bordes y radios ────────────────────────────────── */
  --dl-radius-sm:       10px;
  --dl-radius:          16px;
  --dl-radius-lg:       24px;
  --dl-radius-pill:     9999px;
  --dl-border-width:    1px;
  --dl-border-color:    var(--dl-line);

  /* ─── Sombras ────────────────────────────────────────── */
  --dl-shadow-sm:       0 1px 2px rgba(0, 38, 31, 0.05),
                        0 1px 3px rgba(0, 38, 31, 0.06);
  --dl-shadow-md:       0 4px 12px rgba(0, 38, 31, 0.08),
                        0 2px 4px rgba(0, 38, 31, 0.05);
  --dl-shadow-lg:       0 24px 60px rgba(0, 38, 31, 0.12),
                        0 8px 20px rgba(0, 38, 31, 0.08);
  --dl-shadow-card:     0 2px 8px rgba(0, 38, 31, 0.06);

  /* ─── Transiciones ───────────────────────────────────── */
  --dl-ease:            cubic-bezier(0.22, 1, 0.36, 1);
  --dl-transition-fast:   0.15s var(--dl-ease);
  --dl-transition:        0.2s  var(--dl-ease);
  --dl-transition-slow:   0.4s  var(--dl-ease);

  /* ─── Z-index (orden de apilamiento canónico) ────────── */
  --dl-z-base:          1;
  --dl-z-sticky:        10;
  --dl-z-dropdown:      60;
  --dl-z-fixed:         70;
  --dl-z-overlay:       1040;
  --dl-z-modal:         1055;
  --dl-z-toast:         1080;
  --dl-z-tooltip:       1090;
}