/* ============================================================
   tokens.css — Design tokens del sistema de evaluación PI
   Sistema de Evaluación · Coordinación de Estudios · UAM Azcapotzalco
   Sincronizado con variables.css de la página web principal y globals.css del comite-app.
   Al cambiar un token aquí, actualizar también los otros dos archivos.
   ============================================================ */

:root {

  /* ----------------------------------------------------------
     COLORES INSTITUCIONALES UAM
     ---------------------------------------------------------- */
  --uam-guinda:        #8B0000;
  --uam-guinda-deep:   #5C0000;
  --uam-guinda-bright: #C41E3A;
  --uam-navy:          #0f3460;
  --uam-navy-bright:   #16213e;

  --uam-grad:      #8B0000;
  --uam-grad-hero: #5C0000;

  /* ----------------------------------------------------------
     FONDOS (tema claro)
     ---------------------------------------------------------- */
  --bg-base:    #F8FAFC;   /* página — slate-50 */
  --bg-raised:  #FFFFFF;   /* cards, paneles */
  --bg-overlay: #F1F5F9;   /* chips, hover, elementos elevados */
  --bg-chip:    #F1F5F9;   /* chips, secondary buttons */

  /* ----------------------------------------------------------
     BORDES
     ---------------------------------------------------------- */
  --bd-default: #E2E8F0;   /* borde estándar — slate-200 */
  --bd-strong:  #CBD5E1;   /* borde marcado — slate-300 */
  --bd-subtle:  #F1F5F9;   /* borde sutil — slate-100 */

  /* ----------------------------------------------------------
     TEXTO
     ---------------------------------------------------------- */
  --fg-1: #0F172A;   /* texto principal — slate-900 */
  --fg-2: #1E293B;   /* texto secundario — slate-800 */
  --fg-3: #334155;   /* texto muted fuerte — slate-700 */
  --fg-4: #64748B;   /* texto muted — slate-500 */
  --fg-5: #94A3B8;   /* placeholders, deshabilitados — slate-400 */

  /* ----------------------------------------------------------
     BARRA INSTITUCIONAL
     ---------------------------------------------------------- */
  --bar-bg:   #8B0000;   /* guinda UAM */
  --bar-text: #FFFFFF;

  /* ----------------------------------------------------------
     ROLES
     ---------------------------------------------------------- */
  --role-coordinador:        #8B0000;
  --role-coordinador-hover:  #C41E3A;
  --role-coordinador-press:  #5C0000;
  --role-coordinador-shadow: rgba(139, 0, 0, 0.22);
  --role-coordinador-tint:   rgba(139, 0, 0, 0.07);
  --role-coordinador-border: rgba(139, 0, 0, 0.18);

  --role-asesor:        #0f3460;
  --role-asesor-hover:  #164a86;
  --role-asesor-press:  #0A2545;
  --role-asesor-shadow: rgba(15, 52, 96, 0.14);
  --role-asesor-tint:   rgba(15, 52, 96, 0.06);
  --role-asesor-border: rgba(15, 52, 96, 0.16);

  /* ----------------------------------------------------------
     SEMÁNTICOS (estados)
     ---------------------------------------------------------- */
  --success-fg:  #16A34A;
  --success-bg:  rgba(22, 163, 74, 0.08);
  --success-bd:  rgba(22, 163, 74, 0.20);

  --warning-fg:  #D97706;
  --warning-bg:  rgba(217, 119, 6, 0.08);
  --warning-bd:  rgba(217, 119, 6, 0.20);

  --danger-fg:   #DC2626;
  --danger-bg:   rgba(220, 38, 38, 0.08);
  --danger-bd:   rgba(220, 38, 38, 0.20);

  --info-fg:     #0284C7;
  --info-bg:     rgba(2, 132, 199, 0.08);
  --info-bd:     rgba(2, 132, 199, 0.20);

  --neutral-fg:  #64748B;
  --neutral-bg:  rgba(100, 116, 139, 0.08);
  --neutral-bd:  rgba(100, 116, 139, 0.15);

  /* ----------------------------------------------------------
     TIPOGRAFÍA
     ---------------------------------------------------------- */
  --font-heading: 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-sans:    'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:    ui-monospace, 'JetBrains Mono', 'Courier New', monospace;

  --fs-display:  24px;
  --fs-title:    18px;
  --fs-subtitle: 16px;
  --fs-body:     14px;
  --fs-caption:  12px;
  --fs-eyebrow:  11px;

  --lh-tight:  1.2;
  --lh-snug:   1.375;
  --lh-normal: 1.5;

  --tracking-tight:    0;
  --tracking-eyebrow:  0.10em;

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-black:    800;

  /* ----------------------------------------------------------
     ESPACIADO (base 4px)
     ---------------------------------------------------------- */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;

  /* ----------------------------------------------------------
     RADIOS
     ---------------------------------------------------------- */
  --radius-sm:   4px;
  --radius-md:   6px;
  --radius-lg:   8px;
  --radius-xl:   8px;
  --radius-full: 9999px;

  /* ----------------------------------------------------------
     SOMBRAS
     ---------------------------------------------------------- */
  --shadow-sm:  0 1px 1px rgba(15, 23, 42, 0.03);
  --shadow-md:  0 1px 2px rgba(15, 23, 42, 0.06);
  --shadow-lg:  0 3px 8px rgba(15, 23, 42, 0.08);
  --shadow-cta-coordinador: none;
  --shadow-cta-asesor:      none;

  /* ----------------------------------------------------------
     TRANSICIONES
     ---------------------------------------------------------- */
  --transition-fast:   all 0.12s ease;
  --transition-normal: all 0.20s ease;
}